用于创建新元素的Mutation Observer
我正在尝试在创建特定div时使函数关闭。 用最简单的术语来说，我有这样的事情：
Click me! $("#foo").live("click",function(e) { e.preventDefault(); $(this).append($("").html("new div").attr("id","bar")); }); 以前，我有变异事件听取div＃bar的创建 – 这样的事情：
$("#bar").live("DOMNodeInserted", function(event) { console.log("a new div has been appended to the page"); });
是否有使用Mutation Observers的等价物？ 我尝试了attrchange.jsfunction， 你可以在DOM元素的样式对象更改后有一个javascript钩子触发器吗？ 但该插件仅检测元素何时被修改，而不是何时创建。
这是侦听#foo子#foo突变的代码，并检查是否添加了id为bar的子#foo 。
MutationObserver = window.MutationObserver || window.WebKitMutationObserver; $("#foo").live("click",function(e) { e.preventDefault(); $(this).append($("").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
但是，这只能观察#foo 。 如果您希望将#bar为其他节点的新子节点，则需要通过额外调用obs.observe()来观察这些潜在父节点。 要观察id为baz的节点，您可能会：
obs.observe($('#baz').get(0), { childList: true, subtree: true });
添加subtree选项意味着观察者将寻找添加#bar作为子项或更深层次的后代（例如孙子）。
使用jQuery时，可以简化MutationObserver的用法，如下所示。
$("#btnAddDirectly").click(function () { $("#canvas").append($('new child direct')); }); $("#btnAddAsChildOfATree").click(function () { $("#canvas").append($('new child tree')); }); 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});
Canvas