1

我有一个 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 Observer 是最好的方法。但是，我还没有完全让它与突变观察者一起工作。然后我找到了一个名为Mutation Summary的库，声称它可以做我想做的事。我只是无法让它以我想要的方式工作。

现在我有这个：

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

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

但是，当我将属性添加到 eachli时，它确实有效。但我不想在需要检查的每个元素上定义属性。只需将其放在跟踪其所有子元素的父元素上即可。至少对我来说，这似乎是最合乎逻辑的......

如果你有一个没有MutationSummary库的解决方案，那完全没问题。只要data-watch="true"触发具有属性（及其子元素）的元素的所有更改（添加、更改或删除）。

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

4

1 回答 1

0

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!");
    });
  });
};

你可以在这里看到一个演示，由 Vital Dev Team 提供的 ajax。

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

请注意，“更改” dom 事件仅限于表单，因此提醒系统更改将需要更多代码。您最终可能会在.each()方法中使用 MutationObserver 而不是传统的事件侦听器。不确定这是否比您尝试做的更容易或更难。

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

于 2016-03-08T12:16:30.497 回答