javascript - jQuery 观察 domElement 的变化？

Question

我有一个将 html 标记注入(inject)页脚 div 的 ajax 回调。

我想不通的是如何创建一种方法来监视 div 的内容何时发生变化。将我尝试在回调中创建的布局逻辑放在回调中不是一个选项，因为每个方法(回调和我的布局 div 处理程序)不应该知道另一个。

理想情况下，我希望看到某种类似于 $('#myDiv').ContentsChanged(function() {...}) 或 $(' #myDiv').TriggerWhenContentExists( function() {...})

我找到了一个名为 watch 的插件和该插件的改进版本，但始终无法触发。我尝试“观察”我能想到的一切(即通过 ajax 注入(inject)更改 div 的高度属性)但根本无法让他们做任何事情。

有什么想法/帮助吗？

Answer 1

我发现最有效的方法是绑定(bind)到 DOMSubtreeModified事件。它适用于 jQuery 的 $.html()。并通过标准 JavaScript 的 innerHTML属性(property)。

$('#content').bind('DOMSubtreeModified', function(e) {
  if (e.target.innerHTML.length > 0) {
    // Content change handler
  }
});

http://jsfiddle.net/hnCxK/

当从 jQuery 的 $.html() 调用时，我发现该事件触发了两次:一次是清除现有内容，一次是设置它。快速.length -check 将在简单的实现中工作。

同样重要的是要注意，当设置为 HTML 字符串(即 '<p>Hello, world</p>')时，事件将总是触发。对于纯文本字符串，该事件只会在更改时触发。