Question

我想在元素添加到文档时触发事件。我已经阅读了JQuery documentation for on()和list of events但是没有一个事件似乎与元素创建有关。

我必须监控DOM，因为我无法控制何时将元素添加到文档中（因为我的Javascript是Chrome扩展内容脚本）

Answer 1

我知道这是一个老问题，已经有了答案，但由于情况发生了变化，我想我会为登陆此页面寻找答案的人添加更新的答案。

DOM Mutation Events 已被弃用。根据MDN（关于DOM Mutation Events）：

<强>已过时
此功能已从Web中删除。虽然有些浏览器可能仍然支持它，但它正在被删除。不要在旧项目或新项目中使用它。使用它的页面或Web应用程序可能随时中断。

应该使用新的 MutationObserver API ，这也更有效（ mutation-summary 库现在为这个新API提供了一个有用的接口。）

使用示例：

// Create an observer instance.
var observer = new MutationObserver(function (mutations) {
  mutations.forEach(function (mutation) {
    console.log(mutation.type);
  });
});

// Config info for the observer.
var config = {
  childList: true, 
  subtree: true
};

// Observe the body (and its descendants) for `childList` changes.
observer.observe(document.body, config);

...

// Stop the observer, when it is not required any more.
observer.disconnect();

Answer 2

如上所述，我不是在创建自己的元素，因此在创建元素时触发事件不是一种选择。

最佳解决方案是 Mutation Observer API，Mutation Summary为其提供了友好的界面。

Answer 3

对于最简单的选项，您可能需要检查LiveQuery，它实际上是您所追求的“DOM侦听器”。但是，它应该谨慎使用，因为它有可能在性能方面非常重量级。

如果您更喜欢'自己动手' - 使用.on（），应适用于所有当前和未来的元素 - 但添加的元素需要与选择器匹配。例如，如果将事件连接到所有.myClass类，然后将相同类的新元素注入DOM，则应触发该事件。实际上，.on（）API汇编了以前版本的jQuery中的bind / live / delegate，后两个版本可以对抗当前和未来的DOM元素。

Answer 4

作为@SpaceBison答案的补充，您可以在创建这些元素时创建自己的事件。例如：

function create_element() {
    // Create an element
    $( 'body' ).append( "<p>Testing..</p>" )
    // Trigger
    $( 'body' ).trigger( 'elementCreated' );
}
function monitor_elements() {
    $("body").on("elementCreated", function(event){
    alert('One more');
    });
}

$(document).ready(function(){

     monitor_elements();

     for (var i=0; i < 3; i++) {
         create_element();
     }

});

实例：http://jsfiddle.net/9NsAh/

但是，当然，只有在创建自己的元素时它才有用。

Chrome扩展程序：在元素创建时触发事件？

4 个答案: