元素添加到DOM時觸發事件：JQuery Livequery等效於1.7

Question

我希望在頁面上顯示特定元素時觸發事件（我不控制源頁面 - 這是Chrome擴展程序）

我已經閱讀了有關JQuery 1.7的on（）方法的文檔。 然而，它似乎是關於等待在選擇器上觸發特定事件 - 單擊事件 - 而不僅僅是在添加與選擇器匹配的元素時。

相當於現在未維護的livequery插件：

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

Answer 1

如果這是專為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的庫 ，它可能更容易使用。

Answer 2

.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