觀察具有特定屬性的元素

Question

我有一個web應用程序，它具有一個index.html，通過ajax加載數據以顯示不同的頁面。

在這些不同的頁面上，我想將data-watch="true"屬性放置在某些需要關注更改（包括本身及其子項）的元素上。例如：

<ul data-watch="true"> 
    <li>this</li> 
    <li>is</li> 
    <li>a</li> 
    <li>test</li> 
</ul> 

如果ul本身的變化，或者說ul的孩子添加/更改/刪除我需要執行一個功能，顯示什麼發生了變化。 ul就是一個例子。這也可能是一個有大量孩子的div（也包括孩子等）。

經過一番研究，我發現使用突變觀察者是最好的方法。然而，我並不完全同意突變觀察者的工作。然後我發現了一個名爲突變摘要的庫，聲稱它可以做我想做的事。我無法以我想要的方式讓它工作。

現在我有這樣的：

var observer = new MutationSummary({ 
    callback: handleChanges, 
    queries: [{ 
     attribute: 'data-watch', 
    }] 
}); 
function handleChanges(summaries){ 
    console.log(summaries); 
} 

但有了這個代碼handleChanges當ul通過AJAX加載不會被觸發。

但是，當我將屬性添加到每個li，那麼它確實有效。但我不想在每個需要檢查的元素上定義屬性。只需將它放在一個跟蹤其所有子項的父元素上即可。這似乎是對我來說最邏輯的至少...

如果你有一個沒有MutationSummary庫的解決方案，那完全沒問題。只要觸發了具有data-watch="true"屬性（及其子項）的元素的所有更改（添加，更改或刪除）。

你能幫我解決這個問題嗎？

Answer 1

JQuery允許您一次在多個元素上添加事件偵聽器。像$（「ul [data-watch ='true']」）這樣的選擇器應該封裝你感興趣的元素。如果你將一個事件監聽器包裝在ajax調用的成功回調函數中的domready語句中，預期。這將是這個樣子：

$.ajaxSetup({cache:false, success:function(){ 
    $(document).ready(handler); 
}}); 

function handler(){ 
    $("[data-watch='true']").each(function(){ 
    this.style.cursor = "pointer"; 
    $(window).on("click", this,function(){ 
     console.log("I'm now listening!"); 
    }); 
    }); 
}; 

你可以看到一個演示here，命門開發團隊的AJAX禮貌。

至於你的代碼目前沒有工作的原因，我不熟悉MutationSummary，但我想這個問題與嘗試在同步上下文中使用異步值有關。傾聽來自靜態範圍的更改很重要。

請注意，「更改」dom事件僅限於表單，因此提醒系統進行更改將需要a little more code。您可能最終會在.each()方法中使用MutationObserver，而不是傳統的事件偵聽器。不知道這是否比你想要做的更容易或更難。

無論如何，我希望有一些幫助！