Question

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

E.g。假设我通过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的回答below。

如果将'DOMNodeInserted' event直接绑定到文档或正文，则每次插入任何内容时都会执行该操作。如果您希望仅在添加特定类型的元素时才运行回调，则最好使用delegated events。

通常，如果要向DOM添加一类元素，则将它们添加到公共父级。所以附上事件处理程序如下：

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

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

注：

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

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

Answer 2

.livequery() plugin仍然满足这种利基需求，如下所示：

$('.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）。

Answer 5

看看insertionQuery。它是一个有趣的库，它使用CSS来检测新元素。因为它使用CSS，所以没有性能损失，你会得到与选择器匹配的实际元素。

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

5 个答案: