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

Answer 2

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

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

IE不支持这个propertychange属性,但我认为最接近这个是事件,它响应元素的属性或CSS属性的变化而触发,但是它不会响应innerHTML的变化而触发,这会产生一直接近你想要的.

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

看看这个讨论.修改尚未创建的元素的首选方法(除了事件)