Javascript jQuery 监视 domElement 的变化？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1960919/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery watch for domElement changes?
提问by jas
I have an ajax callback which injects html markup into a footer div.
我有一个 ajax 回调，它将 html 标记注入页脚 div。
What I can't figure out is how to create a way to monitor the div for when it's contents change. Placing the layout logic I'm trying to create in the callback isn't an option as each method (callback and my layout div handler) shouldn't know about the other.
我无法弄清楚的是如何创建一种方法来监视 div 的内容何时发生变化。将我尝试在回调中创建的布局逻辑不是一个选项，因为每个方法（回调和我的布局 div 处理程序）不应该知道另一个。
Ideally I'd like to see some kind of event handler akin to $('#myDiv').ContentsChanged(function() {...})or $('#myDiv').TriggerWhenContentExists( function() {...})
理想情况下，我希望看到某种类似于$('#myDiv').ContentsChanged(function() {...})或的事件处理程序$('#myDiv').TriggerWhenContentExists( function() {...})
I found a plugin called watch and an improved version of that plugin but could never get either to trigger. I tried "watching" everything I could think of (i.e. height property of the div being changed via the ajax injection) but couldn't get them to do anything at all.
我找到了一个名为 watch 的插件和该插件的改进版本，但始终无法触发。我尝试“观看”我能想到的所有内容（即通过 ajax 注入更改 div 的高度属性），但根本无法让他们做任何事情。
Any thoughts/help?
任何想法/帮助？
回答by Courtney Christensen
The most effective way I've found is to bind to the DOMSubtreeModifiedevent. It works well with both jQuery's $.html()and via standard JavaScript's innerHTMLproperty.
我发现的最有效的方法是绑定到DOMSubtreeModified事件。它适用于 jQuery$.html()和通过标准 JavaScript 的innerHTML属性。
$('#content').bind('DOMSubtreeModified', function(e) {
if (e.target.innerHTML.length > 0) {
// Content change handler
}
});
When called from jQuery's $.html(), I found the event fires twice: once to clear existing contents and once to set it. A quick .length-check will work in simple implementations.
当从 jQuery 调用时$.html()，我发现该事件触发了两次：一次是清除现有内容，一次是设置它。快速检查.length将适用于简单的实现。
It's also important to note that the event will alwaysfire when set to an HTML string (ie '<p>Hello, world</p>'). And that the event will only fire when changedfor plain-text strings.
同样重要的是要注意，当设置为 HTML 字符串（即）时，该事件将始终触发'<p>Hello, world</p>'。并且该事件只会在更改为纯文本字符串时触发。
回答by Scoobler
You can listen for changes to DOM elements (your div for example)by binding onto DOMCharacterDataModifiedtested in chrome but doesn't work in IE see a demo here
Clicking the button causes a change in the div which is being watched, which in turn fills out another div to show you its working...
您可以通过绑定到DOMCharacterDataModified来监听 DOM 元素（例如您的 div）的变化，该DOMCharacterDataModified在 chrome 中测试但在 IE 中不起作用，请在此处查看演示
单击按钮会导致正在观看的 div 发生变化，然后填充出另一个 div 向您展示它的工作...
Having a bit more of a look Shiki's answer to jquery listen to changes within a div and act accordinglylooks like it should do what you want:
多看看Shiki对jquery的回答会监听 div 内的变化并相应地采取行动，看起来它应该做你想做的事：
$('#idOfDiv').bind('contentchanged', function() {
// do something after the div content has changed
alert('woo');
});
In your function that updates the div:
在更新 div 的函数中：
$('#idOfDiv').trigger('contentchanged');
See this as a working demo here
回答by Ricardo Freitas
There is a neat javascript library, mutation-summary by google, that lets you observe dom changes concisely. The great thing about it, is that if you want, you can be informed only of the actions that actually made a difference in the DOM, to understand what I mean you should watch the very informative video on the project's homepage.
谷歌有一个简洁的 javascript 库，mutation-summary，可以让您简洁地观察 dom 变化。关于它的伟大之处在于，如果您愿意，您可以只获知实际对 DOM 产生影响的操作，要了解我的意思，您应该观看项目主页上的内容丰富的视频。
link: http://code.google.com/p/mutation-summary/
链接：http: //code.google.com/p/mutation-summary/
jquery wrapper: https://github.com/joelpurra/jquery-mutation-summary
jquery 包装器：https: //github.com/joelpurra/jquery-mutation-summary
回答by rynlbrwn
You might want to look into the DOMNodeInserted event for Firefox/Opera/Safari and the onpropertychange event for IE. It probably wouldn't be too hard to utilize these events but it might be a little hack-ish. Here is some javascript event documentation: http://help.dottoro.com/larrqqck.php
您可能需要查看 Firefox/Opera/Safari 的 DOMNodeInserted 事件和 IE 的 onpropertychange 事件。利用这些事件可能不会太难，但它可能有点hack-ish。这是一些 javascript 事件文档：http: //help.dottoro.com/larrqqck.php
