观察具有特定属性的元素

我有一个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"属性（及其子项）的元素的所有更改（添加，更改或删除）。

你能帮我解决这个问题吗？

来源

2016-03-08 Guido Visser

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，而不是传统的事件侦听器。不知道这是否比你想要做的更容易或更难。

无论如何，我希望有一些帮助！

来源

2016-03-08 12:16:30 Parker

好想法！但是，如果在代码中的其他地方调用成功函数，是不是覆盖了成功函数？ –

那么全球。ajaxSuccess（）可以被覆盖，但我的理解是，您必须在进行调用时明确地执行上述操作，在这种情况下，您的函数就是覆盖函数。 – Parker

观察具有特定属性的元素

回答

相关问题