如何在jQuery中检测新元素的创建？

Question

假设我有以下代码返回页面上锚元素的数量:

function getLinkCount() {
    alert("Links:" + $("a").length);
}

如果我打电话准备好文件,它将按预期工作.但是,如果现在通过javascript动态地将新链接插入到页面中,我怎样才能获得再次运行链接计数器功能的通知？(我无法控制可以创建新链接的脚本).

基本上我正在寻找类似于live()仅观看元素创建事件的东西,例如:

$("a").live("create", getLinkCount);

在创建新元素时会触发.

Answer 1

您可以使用DOMSubtreeModified事件.例如:

$(document).bind('DOMSubtreeModified',function(){
  console.log("now there are " + $('a').length + " links on this page.");
})

Answer 2

你可以使用这个.livequery()插件,它为每个元素运行,包括新元素,如下所示:

$("a").livequery(getLinkCount);

但是,此插件已过时,不建议用于当前版本的jQuery.

当你创建元素时通常更容易做到这一点,例如,如果你在AJAX请求之后这样做,.ajaxComplete()处理程序可能是一个好地方,例如:

$(document).ajaxComplete(getLinkCount);

这将在每个请求之后运行,并且由于您通常在success处理程序中创建元素,因此在完整处理程序运行时它们已经存在.

Answer 3

您可以使用我为完全相同的目的开发的reach.js库（它在内部使用MutationObserver）。用法：

document.arrive('a', function(){
    // 'this' refers to the newly created element
    var newElem = this;
});

Answer 4

接受的答案来自 2010 年，并使用不再积极维护的 jQuery 插件。最高支持率的答案表明使用DOMSubTreeModified现已弃用，不应再使用。

如今，您应该使用MutationObserver来检测元素何时添加到 DOM。MutationObservers 现在在所有现代浏览器（Chrome 26+、Firefox 14+、IE11、Edge、Opera 15+ 等）中得到广泛支持。

下面是一个简单的示例，说明如何使用 aMutationObserver来监听元素何时添加到 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!

observer每当从 中添加或删除任何节点时，事件处理程序都会触发document。然后，在处理程序内部，我们执行检查contains以确定myElement现在是否在document.

您不需要迭代存储在中的每个 MutationRecord，因为您可以直接在 上mutations执行检查。document.containsmyElement

为了提高性能，请替换为 DOMdocument中将包含的特定元素。myElement