我有一个 div，它的内容可能会以各种方式改变：例如，它的整个内容可以通过 innerHTML 重新加载，或者可以通过 DOM 方法添加节点。这反过来可能通过原生 javascript 或通过调用 jQuery API 或通过其他库间接发生。
我希望在div的内容改变为执行一些代码，但我绝对没有控制上如何将改变。事实上，我正在设计一个可供其他人使用的小部件，他们可以按照自己喜欢的方式自由更改 div 的内容。当这个 div 的内部内容发生变化时，小部件的形状也可能需要更新。
我正在使用 jQuery。有没有办法捕获这个 div 的内容已经改变的事件，但是它发生了？
您可以使用DOMNodeInserted和DOMNodeRemoved检查元素是否被添加或删除。不幸的是，IE 不支持这一点。
$('#myDiv').bind('DOMNodeInserted DOMNodeRemoved', function(event) {
if (event.type == 'DOMNodeInserted') {
alert('Content added! Current content:' + '\n\n' + this.innerHTML);
} else {
alert('Content removed! Current content:' + '\n\n' + this.innerHTML);
}
});
您可以使用 保存初始内容和未来的更改.data()。这是一个例子。
var div_eTypes = [],
div_changes = [];
$(function() {
$('#myDiv').each(function() {
this['data-initialContents'] = this.innerHTML;
}).bind('DOMNodeInserted DOMNodeRemoved', function(event) {
div_eTypes.concat(e.type.match(/insert|remove/));
div_changes.concat(this.innerHTML);
});
});
示例输出：
> $('#myDiv').data('initialContents');
"<h1>Hello, world!</h1><p>This is an example.</p>"
> div_eTypes;
["insert", "insert", "remove"]
> div_changes;
["<iframe src='http://example.com'></iframe>", "<h4>IANA — Example domains</h4><iframe src='http://example.com'></iframe>", "<h4>IANA – Example domains</h4>"]
您可能还想包括在内DOMSubtreeModified，因为我已经发现了这一点，DOMNodeInserted并且DOMNodeRemoved如果innerHTML直接替换元素，则不会触发。它在 IE 中仍然不起作用，但至少在其他浏览器中可以正常工作。
尝试这样的事情......
$('#divId').bind('DOMNodeInserted', function(event) {
alert('inserted ' + event.target.nodeName + // new node
' in ' + event.relatedNode.nodeName); // parent
});
IE 不支持此propertychange属性，但我认为最接近此属性的是事件，该事件响应元素的属性或 CSS 属性的更改而触发，但不会响应innerHTML 的更改而触发，这将具有已经接近你想要的。
一种更可行的解决方案是覆盖jquery的操作功能......
看看这个讨论..修改尚未创建的元素的首选方式（除了事件）
javascript 和 jQuery 中都没有这样的事件 (onChange)，您必须创建一个自定义事件。
一种解决方案可能是使用 lowpro 在此元素中附加您想要控制的行为，此行为将序列化元素，然后构建一个轮询，每 x 毫秒检查一次元素是否已更改，如果已更改，则触发您的自定义事件在那个元素上。
你有一些关于如何在 jQuery 中使用 lowpro 的例子：http : //www.learningjquery.com/2008/05/using-low-pro-for-jquery
祝你好运！