元素添加到DOM时触发事件:1.7中的JQuery Livequery等效项

Triggering event when element added to DOM: JQuery Livequery Equivalent in 1.7

本文关键字：JQuery 中的 Livequery DOM 添加 事件 元素      更新时间：2024-06-06

我想在页面上出现特定元素时触发事件（我不控制源页面-这是Chrome扩展）

我已经阅读了关于JQuery1.7的on（）方法的文档。然而，它似乎是在等待选择器上触发特定事件——点击事件——而不仅仅是在添加与选择器匹配的元素时。

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

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

如果这是为chrome 18+设计的chrome扩展，那么您可以使用DOM4规范中名为"突变观测器"的功能。这会分配一个回调，该回调在DOM更改时激发，然后您可以使用它来执行任何您想要的操作。它仍然很新，但这里有更多的信息

该页面的代码示例：

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);

更新：还注意到一个基于此API的库，它可能更容易使用。

.livequery()的工作原理

.livequery()有两个用途：

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

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

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

如果您选择使用自己的实现，只需确保您不会犯与.live()开发人员相同的错误：将选择器从jQuery参数移到模块的函数参数中：jQuery(selector).live(...)->jQuery(...).on(..., selector, ...)，因为在准备脚本时不需要执行（只有在发生更改时才会执行）。

侦听添加到DOM中的新元素

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

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

相关文章：