Question

如何在jquery中检测何时将新元素添加到文档中？

说明：我想知道何时将一个带有“column-header”类的元素添加到文档中。因为我打算在这些元素上运行一些javascript。

我该怎么做？我使用jQuery javascript库。

Answer 1

$(document).bind('DOMNodeInserted', function(e) {
    console.log(e.target, ' was inserted');
});

DOMNodeInserted是DOM级别3事件。这反过来意味着，您需要一个相当新的浏览器来支持这种事件。

参考：MDC

Answer 2

接受的答案使用了2011年的过时插件，最高的upvoted答案使用现在为deprecated的Mutation事件。

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

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

为简洁起见，我使用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。

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

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

Answer 3

如果你想在它上面做一些jQuery，你也可以做livequery (extra plugin)之类的事情：

$('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.
});

更新的：似乎链接被打破了。试试this link

Answer 4

我会使用setInterval重复检查元素。例如

var curLength=0;
setInterval(function(){
  if ($('.column-header').length!=curLength){
    curLength=$('.column-header').length;
    // do stuff here
  }
},100);

此代码将每100毫秒检查一次新的.colum-header元素

Answer 5

我认为上面提到的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的返回值，以便您可以停止它，或者您需要做什么。但它应该完成工作。

Answer 6

您应该查看jQuery Mutation Events。我相信这就是你要找的东西。

Answer 7

如果要为类column-header的所有元素设置相同的函数然后你可以使用jquery live（）

$(".column-header").live("click",function(){});

Answer 8

如何使用轮询 - 继续搜索具有类“column-header”的元素，直到找到它然后执行操作。看似简单。

Answer 9

不推荐使用2013年的MutationEvents。如果其他人在检测dom中的新元素时遇到问题，您可以使用MutationObservers而不是： https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

Answer 10

试试这个......

if($('.column-header')){  
//do something...
}

或者你也可以做这样的事情。这将是更通用的

jQuery.exists = function(selector) { return ($(selector).length > 0); }

if ($(selector).exists()) {
  // Do something
}

如何在jquery中检测何时将新元素添加到文档中？

10 个答案: