4

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

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

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

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

2 回答 2

3

如果这是为 Chrome 18+ 设计的 chrome 扩展，那么您可以使用DOM4 规范中称为 Mutation Observers的功能。这会分配一个回调，当 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 的库，它可能更易于使用。

于 2012-08-01T11:29:59.313 回答
1

.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

于 2012-08-01T11:30:07.297 回答