關於dom中的班級創建

Question

DomNodeInserted已被棄用。我能找到的MutationObserver的唯一示例是顯示正在更新的元素，而不是添加的元素。

什麼是最好的方式來偵聽動態創建的某個類的新元素？

Answer 1

可能是你問，一旦類添加要觸發事件：

$(document).on('click', function(){ 
$('#theid').addClass('classname').trigger('classChange'); 
}); 


$('#theid').on('classChange', function() { 
// do stuff 
}); 

如果別的東西請解釋：

Answer 2

爲此，您可以通過傳遞正確的MutationObserverInit到MutationObserver。你必須設置subtree到true，並添加attributeFilter：class（如れ的類名）

考慮下面的例子（基於https://hacks.mozilla.org/2012/05/dom-mutationobserver-reacting-to-dom-changes-without-killing-browser-performance/）：

// select the target node 
var target = document.getElementById('some-id'); 

// create an observer instance 
var observer = new MutationObserver(function(mutations) { 
    mutations.forEach(function(mutation) { 
    console.log(mutation); 
    });  
}); 

// configuration of the observer: 
var config = { attributes: true, childList: false, characterData: false, subtree: true, attributeFilter: ['class']}; 

// pass in the target node, as well as the observer options 
observer.observe(target, config); 

var myElement = document.createElement('div'); 
myElement.innerHTML = 'foo'; 
target.appendChild(myElement); 

//triggers the mutation observer 
myElement.classList.add('bar'); 

的jsfiddle這裏：https://jsfiddle.net/7zwraaxz/3/