javascript - 监视具有特定属性的元素

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(还有子元素中的子元素等)。

经过一些研究，我发现使用突变观察器是实现此目的的最佳方法。然而，我还没有完全让它与突变观察者一起工作。然后我发现了一个名为 Mutation Summary 的库，它声称它可以做我想要的事情。我就是无法让它按照我想要的方式工作。

现在我有这个:

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

但是使用此代码，当通过 ajax 加载 ul 时，handleChanges 不会被触发。

但是，当我将属性添加到每个 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 ，由 Vital 开发团队提供的 ajax。

至于您的代码当前无法工作的原因，我不熟悉 MutationSummary，但我想这个问题与尝试在同步上下文中使用异步值有关。监听静态范围内的变化非常重要。

请注意，“更改”dom 事件仅限于表单，因此提醒系统发生更改将需要 a little more code 。您最终可能会在 .each() 方法中使用 MutationObserver，而不是传统的事件监听器。不确定这比您想要做的事情更容易还是更困难。

无论如何，我希望其中有一些帮助!