在div更改时触发jQuery事件

我有一个div,其内容可能以各种方式变化:例如,其整个内容可能通过innerHTML重新加载,或者可以通过DOM方法添加节点。 这反过来可能通过原生JavaScript或通过调用jQuery API或通过其他库间接发生。

当div的内容发生变化时,我想执行一些代码,但是我完全无法控制它将如何改变。 事实上,我正在devise一个可以被其他人使用的小部件,他们可以按照自己喜欢的方式自由地改变div的内容。 当这个div的内部内容改变时,widget的形状也可能必须更新。

我正在使用jQuery。 有没有办法捕捉这个div的内容已经改变的事件,但是它发生了?

您可以使用DOMNodeInsertedDOMNodeRemoved来检查元素是否被添加或删除。 不幸的是,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 ,因为我发现DOMNodeInsertedDOMNodeRemoved不会在元素的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

祝你好运!