元素添加到DOM时触发事件：JQuery Livequery等效于1.7

Question

我希望在页面上显示特定元素时触发事件（我不控制源页面 - 这是Chrome扩展程序）

我已阅读有关JQuery 1.7's on() method的文档。然而，它似乎是关于等待在选择器上触发特定事件 - 单击事件 - 而不是通常在添加与选择器匹配的元素时。

在现在未维护的livequery插件中等效：

$('a').livequery(function () {
  console.log('yaay a link was added');
})

Answer 1

如果这是专为Chrome 18+设计的Chrome扩展程序，那么您可以使用DOM4 specification called Mutation Observers中的功能。这会分配一个在更改DOM时触发的回调，然后您可以使用它来执行您想要的任何操作。它仍然很新，但还有一点info here

该页面的代码示例：

var insertedNodes = [];
var observer = new WebKitMutationObserver(function(mutations) {
 mutations.forEach(function(mutation) {
   for (var i = 0; i < mutation.addedNodes.length; i++)
     insertedNodes.push(mutation.addedNodes[i]);
 })
});
observer.observe(document, { childList: true });
console.log(insertedNodes);

更新：还注意到library based on this API，这可能更容易使用。

Answer 2

.livequery()如何运作

.livequery()有两个用途：

• 当您将事件类型作为第一个参数传递时，
• 当您将回调（函数）作为第一个参数传递时，

在第一种情况下，您完全可以将其替换为当前使用的.on()或已被弃用.delegate() .live()（如果您的jQuery版本低于1.7）。

在第二种情况下，它看起来像.livequery()覆盖标准的DOM修改JS方法，或者将它们“挂钩”到它们中。要模仿这种行为，您需要做类似的事情，或者只是重新设计脚本以避免这种障碍。

如果你选择使用自己的实现，只要确保你没有犯{@ 1}}开发人员犯的错误：将jQuery参数中的选择器移动到模块函数的参数中：.live() - ＆GT; jQuery(selector).live(...)，因为在准备脚本时不需要执行（只有在发生变化时才执行）。

收听添加到DOM

中的新元素

你运气不好，因为没有广泛采用的事件负责监听插入DOM的新DOM元素。您可以使用的可能事件列表如下：

https://developer.mozilla.org/en/DOM_Client_Object_Cross-Reference/DOM_Events