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

http://jsfiddle.net/hnCxK/

当从jQuery的$.html()调用时，我发现事件触发两次：一次清除现有内容，一次设置它。快速.length - 检查可以在简单的实现中使用。

同样重要的是要注意，当设置为HTML字符串（即'<p>Hello, world</p>'）时，事件将始终。而且，对于纯文本字符串，事件只会在触发时触发。

Answer 2

您可以通过绑定到Chrome中测试的DOMCharacterDataModified来侦听对DOM元素（例如你的div）的更改，但在IE中无效，请参阅demo here <登记/> 单击该按钮会导致正在观看的div发生变化，而这又会填充另一个div以显示其正常工作...

再看看Shiki对 jquery listen to changes within a div and act accordingly 的回答，看起来应该做你想做的事情：

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

在更新div的函数中：

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

将此视为working demo here

Answer 3

您可能希望查看Firefox / Opera / Safari的DOMNodeInserted事件以及IE的onpropertychange事件。利用这些事件可能不会太难，但它可能有点黑客攻击。以下是一些javascript事件文档：http://help.dottoro.com/larrqqck.php

Answer 4

有一个整洁的javascript库，谷歌的变异摘要，让你简明扼要地观察dom变化。关于它的好处是，如果你想要的话，你只能被告知实际上在DOM中产生影响的行为，理解我的意思你应该在项目主页上观看信息丰富的视频。

链接： http://code.google.com/p/mutation-summary/

jquery包装器： https://github.com/joelpurra/jquery-mutation-summary

jQuery观看dom Element的变化？

4 个答案: