如何检测何时将新元素添加到 jquery 中的文档?
说明:我想知道何时将具有“column-header”类的元素添加到文档中。因为我计划在这些元素上运行一些 javascript。
我怎样才能做到这一点 ?我使用 jQuery javascript 库。
如何检测何时将新元素添加到 jquery 中的文档?
说明:我想知道何时将具有“column-header”类的元素添加到文档中。因为我计划在这些元素上运行一些 javascript。
我怎样才能做到这一点 ?我使用 jQuery javascript 库。
接受的答案使用 2011 年的过时插件,最高投票的答案使用 Mutation 事件,现在已弃用。
今天,你应该使用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.contains
直接对myElement
.
要提高性能,请替换为 DOMdocument
中将包含的特定元素myElement
。
$(document).bind('DOMNodeInserted', function(e) {
console.log(e.target, ' was inserted');
});
DOMNodeInserted
是一个 DOM 级别 3 事件。这反过来意味着,您需要一个相当新的浏览器来支持这种事件。
参考:MDC
如果你想在上面做一些 jQuery,你也可以做一些类似livequery(额外插件)的事情:
$('column-header').livequery(function()
{
// do things here with your column-header, like binding new events and stuff.
// this function is called when an object is added.
// check the API for the deletion function and so on.
});
更新:链接似乎已损坏。试试这个链接
我会使用 setInterval 反复检查元素。例如。
var curLength=0;
setInterval(function(){
if ($('.column-header').length!=curLength){
curLength=$('.column-header').length;
// do stuff here
}
},100);
此代码将每 100 毫秒检查一次任何新的 .colum-header 元素
我认为上面提到的 DOMNodeInserted 方法可能是最性感的选择,但是如果您需要一些可以在 IE8 及更低版本上使用的东西,您可以执行以下操作:
// wrap this up in en immediately executed function so we don't
// junk up our global scope.
(function() {
// We're going to use this to store what we already know about.
var prevFound = null;
setInterval(function() {
// get all of the nodes you care about.
var newFound = $('.yourSelector');
// get all of the nodes that weren't here last check
var diff = newFound.not(prevFound);
// do something with the newly added nodes
diff.addClass('.justGotHere');
// set the tracking variable to what you've found.
prevFound = newFound;
}, 100);
})();
这只是基本思想,您可以随心所欲地更改它,从中创建一个方法,保留 setInterval 的返回值以便您可以停止它,或者您需要做的任何事情。但它应该完成工作。