jQuery：如何检测给定元素内的HTML是否已更改？

Question

在JavaScript中，可能使用jQuery，如何检测给定元素的HTML内容是否已更改？

我想要做到像下面这样：

$('#myDiv').change(function(){
  // do some stuff
});

我基本上想检测给定元素是否被添加到div中，或者给定元素（例如标签）的内部html是否已更改，然后根据内容隐藏或显示div。

任何关于如何实现这样类似功能的替代想法也将不胜感激。我希望我不必使用某些晦涩的插件来完成这个任务！

注意：这至少需要在IE8中工作！

- JohnIdol

Answer 1

您可以使用DOM Level 3事件DOMNodeInserted。例如：

$('#myDiv').bind('DOMNodeInserted', function(e) {
    console.log('element: ', e.target, ' was inserted');
});

演示: http://www.jsfiddle.net/vsgdZ/1/

当你绑定处理程序的元素附加了新节点时，该事件将触发。

- jAndy

---

@Jan：如果我正确理解了OP的要求（检测新节点），那么这个事件就可以胜任。 - jAndy

如果其中一个子元素的className更改，这个事件会触发吗？那也是“内容更改”。我并不是说你的解决方案是错误的，只是建议另一个事件，如果他需要检测新子元素的插入以外的内容更改，可能会有所帮助。 - Jan

糟糕，我的错。(如果有任何其他实现类似功能的替代方法也欢迎提出。) - Jan

@JohnIdol：如果你只是想观察新节点，你可以依靠 DOMNodeInserted（据我所知）。请参见更新的演示。 - jAndy

“' was inserted” 需要一个闭合的 '。 - pnairn