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() plugin来运行每个元素，包括新元素，如下所示：

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

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

在创建元素时通常更容易做到这一点，例如，如果您在AJAX请求之后执行此操作，.ajaxComplete() handler可能是一个好地方，例如：

$(document).ajaxComplete(getLinkCount);

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

Answer 3

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

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

Answer 4

接受的答案是从2010年开始，使用的jQuery插件不再被主动维护。最高评价的回答建议使用observer，is now deprecated并且不应再使用。

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

这是一个简单的示例，说明如何在将元素添加到DOM时使用document进行侦听。

为简洁起见，我使用jQuery语法构建节点并将其插入DOM中。

contains

myElement事件处理程序将在document添加或删除任何节点时触发。在处理程序中，我们会执行mutations检查以确定document.contains中是否myElement。

您无需遍历document中存储的每个MutationRecord，因为您可以直接在myElement执行{{1}}检查。

要提高效果，请将{{1}}替换为DOM中包含{{1}}的特定元素。