How to capture the change of 'data-value' in <button> tag ? (html, js)

user_19387640 0
Viewed 32

How to capture the change of 'data-value' in tag ? (html, js)

// dropdown box

<button data-value="">'click'</button>
<ul>
 <li>option1</li>
 <li>option2</li>
</ul>

I need 1), 2), 3)

1) click li
2) data-value="" -> data-value="1"
3) $(button).on('change?', function() {} );

but change event support ONLY input, text tag not data-value and click event doesn't work. no change data-value right after 'click' event .

so HOW do i get the change event of 'data-value' ?

jquery javascript
1 Answers

To detect changes to element attributes, you can use a MutationObserver

const btn = document.querySelector("button");

const observer = new MutationObserver((mutationList) => {
  mutationList.forEach(({ attributeName, oldValue, target, type }) => {
    if (type === "attributes" && attributeName === "data-value") {
      console.log(
        `${attributeName} changed from '${oldValue}' to '${target.dataset.value}'`
      );
    }
  });
});
observer.observe(btn, { attributes: true, attributeOldValue: true });

// Delegated event listener at <ul>
document.querySelector("ul").addEventListener("click", ({ target }) => {
  const li = target.closest("li");
  if (li) {
    const option = li.dataset.option;
    if (option !== undefined) {
      btn.dataset.value = option;
    }
  }
});
li { cursor: pointer; }
<button data-value="">'click'</button>
<ul>
 <li data-option="1">option1</li>
 <li data-option="2">option2</li>
</ul>

user_2833660
Related