javascript - 在 div 更改时触发 jQuery 事件

Question

我有一个 div，它的内容可能会以各种方式改变:例如，它的全部内容可能会通过 innerHTML 重新加载，或者节点可能会通过 DOM 方法添加。这反过来可能通过 native 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() 保存初始内容和 future 的更改。这是一个例子。

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 中仍然不起作用，但至少在其他浏览器中可以正常工作。