MutationObserver 僅在第一次更改時觸發

Question

在下面的代碼中，通過重復單擊 2 個按鈕， observer只會在每個觀察到的目標上的第一個變化時觸發？ （輸出顯示變化。 ）

我如何讓它在每次更改時觸發？

 var cc = 1; document.querySelector('.button').addEventListener('click', function(e){ var target1 = document.querySelector('.icon-inbox .unread-count'); target1.innerHTML = ' inbox ' + cc++; }); document.querySelector('.button.nr2').addEventListener('click', function(e){ var target2 = document.querySelector('.icon-achievements .unread-count'); target2.innerHTML = ' reps ' + cc++; }); (function(title,inbox_counter,reps_counter,inbox_value,reps_value) { var observer = new MutationObserver(function(mutations) { mutations.forEach(function(mutation) { if (mutation.type.toLowerCase() == 'attributes' && window.getComputedStyle(mutation.target,null).getPropertyValue("display") == 'none') { if ((' ' + mutation.target.parentElement.className + ' ').indexOf(' icon-inbox ') > -1) { inbox_value = ''; } else { reps_value = ''; } } else { if ((' ' + mutation.target.parentElement.className + ' ').indexOf(' icon-inbox ') > -1) { inbox_value = '(' + mutation.target.textContent + ') '; } else { reps_value = '(' + mutation.target.textContent + ') '; } } document.querySelector('.result').innerHTML = inbox_value + reps_value + title; }); }); observer.observe(inbox_counter, { attributes: true, childList: true, }); observer.observe(reps_counter, { attributes: true, childList: true, }); })(document.title,document.querySelector('.icon-inbox .unread-count'),document.querySelector('.icon-achievements .unread-count'),'','');

 .button { border: 1px solid; } div { height: 24px; }

 <div class="topbar-icon icon-inbox"><span class="unread-count"></span></div> <div class="topbar-icon icon-achievements"><span class="unread-count"></span></div> <br><span class="button">BUTTON</span> &nbsp;&nbsp;&nbsp; <span class="button nr2">BUTTON 2</span> <br><br>Output: <span class="result"></span>

Answer 1

在選項中，您需要添加兩個標志 characterdata 和 subtree

    observer.observe(inbox_counter, { attributes: true, childList: true,characterData:true, subtree:true }); 
    observer.observe(reps_counter, { attributes: true, childList: true,characterData:true , subtree:true });