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' ?
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>