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

IT技术 javascript jquery html css
2021-02-19 12:43:54

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

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

我怎样才能做到这一点 ?我使用 jQuery javascript 库。

6个回答

接受的答案使用 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

截至 2016 年,突变事件已被弃用。建议不要在旧项目或新项目中使用这种技术。皮蒂。
2021-04-23 12:43:54
这是未来发展的最佳选择,IMO。但应该注意的是,IE8 及更低版本不支持此功能。如果有人想以一种快速而肮脏的方式在 IE8 及更低版本中使用这种方法,并且出于某种原因不想使用 livequery,我已经在下面添加了一个答案。
2021-04-25 12:43:54
嗯……这看起来很有趣。
2021-04-27 12:43:54

如果你想在上面做一些 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.
});

更新:链接似乎已损坏。试试这个链接

livequery 不存在
2021-04-23 12:43:54
@w35l3y 更新了答案中的链接。
2021-05-07 12:43:54

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

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

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

根本不会很重,将 Interval 设置为变量并在之后清除它。
2021-04-23 12:43:54
它会很重,但没有对 NodeAdded 事件的本机支持。这是最好的。无论如何,实时查询和突变事件都肯定会使用某种 setInterval 循环。
2021-05-07 12:43:54

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