html内容改变后触发事件,在div更改时触发jQuery事件

小编典典

您可以使用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');

"

Hello, world!

This is an example.

"

> div_eTypes;

["insert", "insert", "remove"]

> div_changes;

["", "

IANA — Example domains

", "

IANA – Example domains

"]

更新2

您可能还想包括DOMSubtreeModified它，因为我发现了这一点，DOMNodeInserted并且DOMNodeRemoved如果innerHTML直接替换一个元素也不会触发。它仍然不能在IE中运行，但至少在其他浏览器中可以正常运行。

2020-05-01