代码之家 › 专栏 › 技术社区 › serg

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

javascript-events jquery

32

serg · 技术社区 · 15 年前

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

如果我要求文件准备就绪,它将按预期工作。但如果现在通过Javascript动态地将一个新链接插入到一个页面中,我如何得到再次运行link counter函数的通知呢(我无法控制可以创建新链接的脚本)。

基本上我在寻找类似的东西 live() 只有在观看元素创建事件时才会这样做,比如:

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

4 回复 | 直到 5 年前

1

22

Nick Craver 12 年前

你可以用 .livequery() plugin 为此,它为每个元素运行,包括新的元素,如下所示:

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

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

但是,在创建元素时通常更容易做到这一点,例如,如果在AJAX请求之后执行,那么 .ajaxComplete() handler 可能是个好地方,例如:

$(document).ajaxComplete(getLinkCount);

这将在每个请求之后运行,因为您通常在 success 当这个完整的处理程序运行时,它们已经存在了。

2

43

mattsh 15 年前

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

3

7

Uzair Farooq 10 年前

你可以用 arrive.js MutationObserver 内部)。用法:

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

4

Elliot B. 8 年前

DOMSubTreeModified 哪一个 is now deprecated

今天,一个 MutationObserver mutationobserver现在广泛支持所有现代浏览器(chrome26+、firefox14+、IE11、Edge、opera15+等)。

MutationObserver 侦听元素何时添加到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 现在在 文件

您不需要迭代存储在中的每个MutationRecord mutations document.contains 直接检查 .

要提高性能,请更换 髓鞘素 在DOM里。