Javascript 在 div 更改时触发 jQuery 事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4979738/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Fire jQuery event on div change
提问by Andrea
I have a div whose content may change in various ways: for instance its whole content may be reloaded via innerHTML, or nodes may be added via DOM methods. This in turn may happen via native javascript or indirectly via calls the jQuery API or via other libraries.
我有一个 div，它的内容可能会以各种方式改变：例如，它的整个内容可以通过 innerHTML 重新加载，或者可以通过 DOM 方法添加节点。这反过来可能通过原生 javascript 或间接通过调用 jQuery API 或通过其他库发生。
I want to execute some code when the content of the div changes, but I have absolutely no controlon howit will change. Indeed I am designing a widget that may be used by other people, who are free to change the content of their divs the way they prefer. When the inner content of this div changes, the shape of the widget may have to be updated as well.
我希望在div的内容改变为执行一些代码，但我绝对没有控制上如何将改变。事实上，我正在设计一个可供其他人使用的小部件，他们可以按照自己喜欢的方式自由更改 div 的内容。当这个 div 的内部内容发生变化时，小部件的形状也可能需要更新。
I'm using jQuery. Is there a way to capture the event that the content of this div has changed, however it happened?
我正在使用 jQuery。有没有办法捕获这个 div 的内容已经改变的事件，但是它发生了？
回答by nyuszika7h
You can use DOMNodeInsertedand DOMNodeRemovedto check if elements are added or removed. Unfortunately, IE doesn't support this.
您可以使用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);
}
});
Update
更新
You could save the initial contents and future changes with .data(). Here's an example.
您可以使用 保存初始内容和将来的更改.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);
});
});
Example output:
示例输出：
> $('#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>"]
Update 2
更新 2
You may want to include DOMSubtreeModifiedas well, because I've found out that DOMNodeInsertedand DOMNodeRemoveddon't trigger if an element's innerHTMLis replaced directly. It still doesn't work in IE, but at least it works fine in other browsers.
您可能还想包含DOMSubtreeModified，因为我已经发现了这一点，DOMNodeInserted并且DOMNodeRemoved如果innerHTML直接替换元素，则不会触发。它在 IE 中仍然不起作用，但至少在其他浏览器中可以正常工作。
回答by Vivek
try something like this...
尝试这样的事情......
$('#divId').bind('DOMNodeInserted', function(event) {
alert('inserted ' + event.target.nodeName + // new node
' in ' + event.relatedNode.nodeName); // parent
});
IE doesn't support this propert but i think the nearest to this is the propertychangeevent, which fires in response to a change in an attribute or CSS property of an element, but it doesn't fire in response to innerHTML changing, which would have been close to what you wanted.
IE 不支持此propertychange属性，但我认为最接近此属性的是事件，该事件响应元素的属性或 CSS 属性的更改而触发，但不会响应innerHTML 的更改而触发，这将具有已经接近你想要的。
one more feasible solution is to override manipulation function of jquery...
一种更可行的解决方案是覆盖jquery的操作功能...
Have a look on this discussion..Preferred way of modifying elements that have yet to be created (besides events)
看看这个讨论..修改尚未创建的元素的首选方式（除了事件）
回答by Fernando Diaz Garrido
There is no such an event (onChange) in javascript nor jQuery, you would have to create a custom event.
javascript 和 jQuery 中都没有这样的事件 (onChange)，您必须创建一个自定义事件。
One solution could be using lowpro to attach a behavior in this element you want to be controlled, this behavior would serialize the element and then build a poll that checks every x miliseconds to see if the element has changed, if changed then trigger your custom event on that element.
一种解决方案可能是使用 lowpro 在您想要控制的元素中附加一个行为，此行为将序列化元素，然后构建一个轮询，每 x 毫秒检查一次元素是否已更改，如果更改则触发您的自定义事件在那个元素上。
You have some examples on how to use lowpro with jQuery here: http://www.learningjquery.com/2008/05/using-low-pro-for-jquery
你有一些关于如何在 jQuery 中使用 lowpro 的例子：http: //www.learningjquery.com/2008/05/using-low-pro-for-jquery
Good luck!
祝你好运！
