突变观察员创建新元素(Mutation Observer for creating new elem

我想说明的是创建一个特定的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").live("DOMNodeInserted", function(event) {
    console.log("a new div has been appended to the page");
});

是否有使用突变观察等效？我试图特色在attrchange.js 你可以有一个DOM元素的样式对象更改后一个javascript勾扳机？但是，当一个元素已被修改，该插件只检测，而不是在它的创建。

Answer 1:

这是代码侦听上的突变的childList #foo并检查是否有id的子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() 观察用的ID的节点baz ，你可以这样做：

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

添加的subtree选项意味着观察员将寻找另外的#bar无论是作为儿童或更深的后裔（如孙子）。

Answer 2:

当使用jQuery的使用MutationObserver S可如下所示进行简化。

 $("#btnAddDirectly").click(function () { $("#canvas").append($('<span class="stuff">new child direct</span>')); }); $("#btnAddAsChildOfATree").click(function () { $("#canvas").append($('<div><div><span class="stuff">new child tree</span></div></div>')); }); var obs = new MutationObserver(function(mutations, observer) { // using jQuery to optimize code $.each(mutations, function (i, mutation) { var addedNodes = $(mutation.addedNodes); var selector = "span.stuff" var filteredEls = addedNodes.find(selector).addBack(selector); // finds either added alone or as tree filteredEls.each(function () { // can use jQuery select to filter addedNodes alert('Insertion detected: ' + $(this).text()); }); }); }); var canvasElement = $("#canvas")[0]; obs.observe(canvasElement, {childList: true, subtree: true});

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="canvas"> Canvas </div> <button id="btnAddDirectly">Add span directly to canvas</button> <button id="btnAddAsChildOfATree">Add span as child of a tree</button>

它始终是重要的注意，第二个参数.observe() MutationObserverInit ，是非常重要的：

在选项中，使用childList: true如果span将只被添加作为直接孩子。 subTree: true ，如果它可以在任何层次向下跌破#canvas 。

从文档：