是否有一个jquery事件,当一个新节点插入到DOM时触发?

是否有一个事件jquery当dom元素被插入到dom中时触发?

例如,可以说我通过ajax加载一些内容,并将其添加到DOM,并在其他一些JavaScript的我可以添加一个事件使用.live(),以便当一个事件匹配一个特定的select器添加到DOM事件触发说元素。 与$(document).ready()类似,但是对于dynamic添加到DOM的内容。

我在做什么:

$('.myClass').live('ready', function() { alert('.myClass added to dom'); }); 

如果jQuery不支持这样的事情,那么是否有另一种方式,我可以实现这个function,而无需修改实际上做的初始dom操作的代码?

.livequery()插件仍然满足这种需求,如下所示:

 $('.myClass').livequery(function() { alert('.myClass added to dom'); }); 

如果你只传递一个像上面这样的callback函数,那么它就会为它find的每个新元素运行,无论是初始的还是添加的。 在函数内部, this是指刚添加的元素。

.live()监听冒泡的事件,所以不适合这个“当元素被添加”的情况,在这方面, .livequery() (插件)并没有完全.live()核心,只有事件冒泡部分(大部分)是。

不build议使用 :根据下面的@ Meglio的评论, DOMNodeInserted事件已被弃用,并将在未来某个未知时间从networking中删除。 为了获得最佳结果,请开始了解MutationObserver API 。

请参阅下面的 @ dain的答案。

如果将“DOMNodeInserted”事件直接绑定到文档或主体,则每次插入任何内容时都会执行该事件 。 如果您希望只在添加特定types的元素时才运行callback,那么使用委托事件将是明智之举。

通常,如果您要向DOM添加一个元素类,您将会将它们添加到一个共同的父项。 所以附上这样的事件处理程序:

 $('body').on('DOMNodeInserted', '#common-parent', function(e) { if ($(e.target).attr('class') === 'myClass') { console.log('hit'); } }); 

基本上与上面Myke的答案相同,但是由于您使用的是委托事件处理程序而不是直接事件处理程序,因此其中的代码将不会被触发。

注意:

 $('body').on('DOMNodeInserted', '.myClass', function(e) { console.log(e.target); }); 

这似乎也工作…但我不知道为什么。

如果你生活在尖端,你可以使用MutationObserver 🙂

  var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver; var list = document.querySelector('ol'); var observer = new MutationObserver(function(mutations) { mutations.forEach(function(mutation) { if (mutation.type === 'childList') { var list_values = [].slice.call(list.children) .map( function(node) { return node.innerHTML; }) .filter( function(s) { if (s === '<br>') { return false; } else { return true; } }); console.log(list_values); } }); }); observer.observe(list, { attributes: true, childList: true, characterData: true }); 

请参阅: https : //hacks.mozilla.org/2012/05/dom-mutationobserver-reacting-to-dom-changes-without-killing-browser-performance/

编辑:这个答案是相当老,现在所有的浏览器,除了Opera Mini支持MutationObserver: http : //caniuse.com/#feat=mutationobserver

另外,以下是MDN上API的直接链接: https : //developer.mozilla.org/en-US/docs/Web/API/MutationObserver

没有jQuery事件,但有一个DOM事件:DOMNodeInsertedIntoDocument。 你可以使用jQuery的方法监听DOM事件。 所以:

 $('.myClass').on('DOMNodeInsertedIntoDocument', function() { alert('myClass was inserted into the DOM'); } 

这可能比使用liveQuery更好,因为该插件有点陈旧(2年没有更新,只承诺支持jQuery 1.2.x)。

看看在插入查询 。 这是一个有趣的库,它使用CSS来检测新的元素。 因为它使用CSS没有性能影响,并且返回匹配select器的实际元素。