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中运行，但至少它在其他浏览器中工作正常。

Answer 2

尝试这样的事情......

    $('#divId').bind('DOMNodeInserted', function(event) {
             alert('inserted ' + event.target.nodeName + // new node
           ' in ' + event.relatedNode.nodeName); // parent
       });

IE不支持此属性，但我认为离此最近的是propertychange事件，它会响应元素的属性或CSS属性的更改而触发，但它不会触发对innerHTML变化的反应，这可能接近你想要的。

另一个可行的解决方案是覆盖jquery的操作函数......

查看此讨论.. Preferred way of modifying elements that have yet to be created (besides events)

Answer 3

在javascript和jQuery中没有这样的事件（onChange），你必须创建一个自定义事件。

一个解决方案可能是使用lowpro在您想要控制的元素中附加行为，此行为将序列化元素，然后构建一个轮询，检查每x毫秒以查看元素是否已更改，如果已更改，则触发您在该元素上的自定义事件。

你有一些关于如何在这里使用lowpro和jQuery的例子： http://www.learningjquery.com/2008/05/using-low-pro-for-jquery

祝你好运！

在div更改时触发jQuery事件

3 个答案:

更新

更新2