Question

我有一个带有index.html的web应用程序，它通过ajax加载数据以显示不同的页面。

在这些不同的页面上，我想将<ul data-watch="true"> <li>this</li> <li>is</li> <li>a</li> <li>test</li> </ul>属性放在需要监视更改的某些元素上（包括它自己及其子元素）。例如：

ul

如果ul本身发生了变化，或者ul的孩子被添加/更改/删除，我需要执行一个功能来显示已更改的内容。 var observer = new MutationSummary({ callback: handleChanges, queries: [{ attribute: 'data-watch', }] }); function handleChanges(summaries){ console.log(summaries); }就是一个例子。这也可能是一个包含大量孩子的div（也是孩子们的孩子等）。

经过一些研究后，我发现使用Mutation Observer是最好的方法。但是，我还没有单独使用变异观察器来完成工作。然后我找到了一个名为 Mutation Summary 的库，声称它可以做我想要的。我只是无法以我想要的方式工作。

现在我有这个：

handleChanges

但是，当通过ajax加载ul时，此代码li无法触发。

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

如果您的解决方案没有MutationSummary库，那就完全没问了。只要触发具有{{1}}属性（及其子项）的元素的所有更改（添加，更改或删除）。

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

Answer 1

JQuery允许您一次在多个元素上添加事件侦听器。像$（＆＃34; ul [data-watch =＆＃39; true＆＃39;]＆＃34;）这样的选择器应该封装你感兴趣的元素。如果你在一个domready中包装一个事件监听器在你的ajax调用成功回调中，你的处理程序应该按预期运行。它看起来像这样：

$.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由Vital Dev Team提供。

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

请注意＆＃34;更改＆＃34; dom事件仅限于表单，因此警告系统进行更改需要a little more code。您可能最终在.each()方法中使用MutationObserver而不是传统的事件侦听器。不确定这比你尝试做的更容易还是更难。

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

观察具有特定属性的元素

1 个答案: