Обнаружение добавленного элемента в DOM с помощью Mutation Observer

Question

Я добавляю некоторый элемент в DOM после события перетаскивания. Мне нужно обнаружить этот элемент и момент, когда этот элемент был добавлен. Я использую Mutation Observer, но что-то не так, код:

var targetNodes = $('.mvly');
var MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
var myObserver = new MutationObserver (mutationHandler);
var obsConfig = { childList: true, characterData: true, attributes: true, subtree: true };

targetNodes.each(function(){
    myObserver.observe(this, obsConfig);
} );

function mutationHandler (mutationRecords) {
    mutationRecords.forEach ( function (mutation) {
        if (typeof mutation.addedNodes == "object") {
            console.log('test');
        }
    });
}

Кто-нибудь может помочь, большое спасибо.

Answer 1

Вот простой пример того, как вы можете использовать MutationObserver прослушивать, когда элемент добавляется в DOM.

Для краткости я использую синтаксис jQuery для построения узла и вставки его в DOM.

var myElement = $("<div>hello world</div>")[0];

var observer = new MutationObserver(function(mutations) {
   if (document.contains(myElement)) {
        console.log("It's in the DOM!");
        observer.disconnect();
    }
});

observer.observe(document, {attributes: false, childList: true, characterData: false, subtree:true});

$("body").append(myElement); // console.log: It's in the DOM!

Вам не нужно перебирать каждый MutationRecord, хранящийся в mutations потому что вы можете выполнить document.contains проверить непосредственно на myElement,