将新节点插入dom时是否会触发jquery事件？

Question

当dom元素插入dom时,是否有事件jquery触发？

例如,假设我通过ajax加载一些内容并将其添加到DOM中,并且在其他一些javascript中我可以使用.live()添加事件,以便当匹配特定选择器的事件添加到DOM时,事件将触发说元素.与$(document).ready()类似,但是在动态添加到DOM的内容上.

我梦想的是:

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

如果jquery不支持这样的东西,那么还有另一种方法可以实现这个功能而无需修改实际执行初始dom操作的代码吗？

Answer 1

不推荐使用:根据@ Meglio在下面的评论,该DOMNodeInserted事件已被弃用,并将在未来的某些未知时间从网络中删除.为获得最佳结果,请开始了解MutationObserver API.

看@dain的答案如下.

如果将"DOMNodeInserted"事件直接绑定到文档或正文,则每次插入任何内容时都会执行该事件.如果您希望仅在添加特定类型的元素时才运行回调,则最好使用委派事件.

通常,如果要向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);
});

这似乎也有效......但我不知道为什么.

Answer 2

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

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

如果你通过它只是一个回调函数像上面,它会为它找到的每个新元素最初和为他们补充运行.函数内部是this指刚刚添加的元素.

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

Answer 3

如果你生活在最前沿,你可以使用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/

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

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

Answer 4

没有jQuery事件,但是有一个DOM事件:DOMNodeInsertedIntoDocument.您可以使用jQuery的on方法侦听DOM事件.所以:

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

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