jQuery监视domElement的变化？

Question

我有一个ajax回调,它将html标记注入一个页脚div.

我无法弄清楚的是如何创建一种方法来监视div的内容何时发生变化.放置我试图在回调中创建的布局逻辑不是一个选项,因为每个方法(回调和我的布局div处理程序)都不应该知道另一个.

理想情况下,我希望看到某种类似于$('#myDiv').ContentsChanged(function() {...})或的事件处理程序$('#myDiv').TriggerWhenContentExists( function() {...})

我发现了一个名为watch的插件和该插件的改进版本,但永远无法触发.我试着"观察"我能想到的一切(即通过ajax注入改变了div的高度属性),但却无法让它们做任何事情.

有什么想法/帮助吗？谢谢你

Answer 1

我找到的最有效的方法是绑定到DOMSubtreeModified事件.它适用于jQuery $.html()和标准JavaScript的innerHTML属性.

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

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

同样重要的是要注意,当设置为HTML字符串(即)时,事件将始终触发'<p>Hello, world</p>'.并且只有在为纯文本字符串更改时才会触发该事件.

值得注意的是,`DOMSubtreeModified`在技术上已被弃用.看起来DOM4将在某一天提供可行的替代方案.请参阅:http://stackoverflow.com/questions/6659662/why-is-the-domsubtreemodified-event-deprecated-in-dom-level-3 (3认同)

Answer 2

您可以通过绑定到在chrome中测试的DOMCharacterDataModified来监听DOM元素(例如你的div)的更改但是在IE中不起作用在这里查看演示
单击该按钮会导致正在观看的div的更改,这反过来填充另一个div告诉你它的工作......

更多地看一下Shiki对jquery的回答听取div中的变化并相应地采取行动看起来应该做你想做的事情:

$('#idOfDiv').bind('contentchanged', function() {
    // do something after the div content has changed
    alert('woo');
});

在更新div的函数中:

$('#idOfDiv').trigger('contentchanged');

Answer 3

谷歌有一个简洁的 javascript 库，mutation-summary，可以让您简洁地观察 dom 变化。关于它的伟大之处在于，如果您愿意，您可以只获知实际对 DOM 产生影响的操作，要了解我的意思，您应该观看项目主页上的内容丰富的视频。