在div更改时触发jQuery事件
我有一个div，其内容可能以各种方式变化：例如，其整个内容可能通过innerHTML重新加载，或者可以通过DOM方法添加节点。 这反过来可能通过原生JavaScript或通过调用jQuery API或通过其他库间接发生。
当div的内容发生变化时，我想执行一些代码，但是我完全无法控制它将如何改变。 事实上，我正在devise一个可以被其他人使用的小部件，他们可以按照自己喜欢的方式自由地改变div的内容。 当这个div的内部内容改变时，widget的形状也可能必须更新。
我正在使用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>"]
更新2
您可能还需要包含DOMSubtreeModified ，因为我发现DOMNodeInserted和DOMNodeRemoved不会在元素的innerHTML被直接replace时触发。 它仍然不能在IE浏览器中工作，但至less在其他浏览器中可以正常工作。
尝试这样的事情…
$('#divId').bind('DOMNodeInserted', function(event) { alert('inserted ' + event.target.nodeName + // new node ' in ' + event.relatedNode.nodeName); // parent });
IE不支持这个propertychange ，但我认为最接近这个是propertychange事件，它响应元素的属性或CSS属性的变化而触发，但是它不会响应innerHTML的变化而触发，已经接近你想要的。
一个更可行的解决scheme是重写jQuery的操作函数…
看看这个讨论。 修改尚未创build的元素的首选方式（除了事件）
在JavaScript和jQuery中没有这样的事件（onChange），您将不得不创build自定义事件。
一个解决scheme可能是使用lowpro来附加你想要控制的这个元素的行为，这种行为会序列化元素，然后build立一个轮询，检查每x毫秒，看看元素是否已经改变，如果改变，然后触发你的自定义事件在那个元素上。
你有一些关于如何在jQuery中使用lowpro的例子： http : //www.learningjquery.com/2008/05/using-low-pro-for-jquery
祝你好运！
