我有一个div,其内容可能会以各种方式更改:例如,可以通过innerHTML重新加载其整个内容,或者可以通过DOM方法添加节点。反过来,这可能是通过本地javascript发生的,也可能是通过调用jQuery API或其他库间接发生的。
我希望在div的内容改变为执行一些代码,但我 绝对没有控制 上 如何 将改变。确实,我正在设计一个可供其他人使用的小部件,他们可以自由选择自己喜欢的div内容。当此div的内部内容更改时,可能还必须更新小部件的形状。
我正在使用jQuery。有没有一种方法可以捕获该div的内容已更改但已发生的事件?
您可以使用DOMNodeInserted和DOMNodeRemoved检查是否添加或删除了元素。不幸的是,IE不支持此功能。
DOMNodeInserted
DOMNodeRemoved
$('#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()。这是一个例子。
.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中运行,但至少在其他浏览器中可以正常运行。
DOMSubtreeModified
innerHTML