元素添加到 DOM 时触发事件：JQuery Livequery Equivalent in 1.7

Posted 2023-05-08

【中文标题】元素添加到 DOM 时触发事件：JQuery Livequery Equivalent in 1.7

【英文标题】：Triggering event when element added to DOM: JQuery Livequery Equivalent in 1.7

【发布时间】：2012-07-30 06:28:23

【问题描述】：

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

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

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

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

【问题讨论】：

我也遇到了这个问题：***.com/questions/11716536/…

【参考方案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，它可能更易于使用。

【讨论】：

很好的答案，但是当我向 DOM 添加事件时，示例代码实际上似乎并没有触发。编辑：要试试这个库...

我必须承认我从未尝试过代码，这个答案主要基于那篇文章 - 我假设您使用的是 Chrome 18 或更高版本？

图书馆工作正常，问题被认为已回答。谢谢！

【参考方案2】：

.livequery() 的工作原理

.livequery()有两种用途：

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

在第一种情况下，您完全可以将其替换为当前使用的 .on() 或已弃用的 .delegate() 或 .live()（如果您的 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

【讨论】：

@nailer：我刚刚找到了.livequery() 的另一个用例，当您将函数传递给它时就是这种情况。这似乎是基于覆盖标准 DOM 修改 JS 方法（.append()、.addClass() 等，如他们的页面上所述），所以如果该功能确实需要并且不能用某些东西替换，您可能应该遵循这种方式更标准。