在div更改时触发jQuery事件

Question

我有一个div，其内容可能会以各种方式更改：例如，可以通过innerHTML重新加载其整个内容，或者可以通过DOM方法添加节点。反过来，这可能是通过本地javascript发生的，也可能是通过调用jQuery
API或其他库间接发生的。

我希望在div的内容改变为执行一些代码，但我 绝对没有控制 上 如何
将改变。确实，我正在设计一个可供其他人使用的小部件，他们可以自由选择自己喜欢的div内容。当此div的内部内容更改时，可能还必须更新小部件的形状。

我正在使用jQuery。有没有一种方法可以捕获该div的内容已更改但已发生的事件？

Answer 1

您可以使用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直接替换一个元素也不会触发。它仍然不能在IE中运行，但至少在其他浏览器中可以正常运行。