Mutation Observer для создания новых элементов

Я пытаюсь сделать функцию отключенной, когда создается конкретный div. В простейшем из терминов у меня есть что-то вроде этого:

<a href="" id="foo">Click me!</a>
<script>
$("#foo").live("click",function(e) {
    e.preventDefault();
    $(this).append($("<div />").html("new div").attr("id","bar"));
});
</script>

Раньше у меня были события мутации, которые слушали создание div # bar - что-то вроде этого:

$("#bar").live("DOMNodeInserted", function(event) {
    console.log("a new div has been appended to the page");
});

Существует ли эквивалент с помощью наблюдателей мутаций? Я попробовал attrchange.js, представленный на Можете ли вы запустить триггер javascript после изменения объекта стиля объекта DOM?, но этот плагин обнаруживает только когда элемент был изменен, а не когда он создан.

Ответы

Ответ 1

Это код, который прослушивает мутации в дочернем списке #foo и проверяет, добавлен ли дочерний элемент с идентификатором bar.

MutationObserver = window.MutationObserver || window.WebKitMutationObserver;

$("#foo").live("click",function(e) {
    e.preventDefault();
    $(this).append($("<div />").html("new div").attr("id","bar"));
});

// define a new observer
var obs = new MutationObserver(function(mutations, observer) {
    // look through all mutations that just occured
    for(var i=0; i<mutations.length; ++i) {
        // look through all added nodes of this mutation
        for(var j=0; j<mutations[i].addedNodes.length; ++j) {
            // was a child added with ID of 'bar'?
            if(mutations[i].addedNodes[j].id == "bar") {
                console.log("bar was added!");
            }
        }
    }
});

// have the observer observe foo for changes in children
obs.observe($("#foo").get(0), {
  childList: true
});

Однако это наблюдает только #foo. Если вы хотите найти добавление #bar в качестве нового дочернего элемента других узлов, вам необходимо понаблюдать за потенциальными родителями с дополнительными вызовами obs.observe(). Чтобы наблюдать node с идентификатором baz, вы можете сделать:

obs.observe($('#baz').get(0), {
  childList: true,
  subtree: true
});

Добавление опции subtree означает, что наблюдатель будет искать добавление #bar в качестве дочернего или более глубокого потомка (например, внука).