在运行时激活jQuery函数

Question

  

可能重复：
  Detect element content changes with jQuery

我有一个包装div说

<div id="placesNewCheckinContainer" style="display:none">
</div>

如果在运行时在placeNewCheckinContainer中插入/删除任何Dom元素，我想要一个jQuery函数。 帮助我如何实现这一点。 谢谢

Answer 1

以完全跨浏览器的方式执行此操作没有方便的方法。 Firefox，Chrome和Safari都支持 DOMSubtreeModified 事件，该事件将触发特定元素内对DOM的任何修改。上述浏览器和Opera支持 DOMNodeInserted 和 DOMNodeRemoved ，它们也可以完成这项工作。

$("#placesNewCheckinContainer").bind("DOMNodeInserted DOMNodeRemoved", function () {
    alert("Something happened inside #placesNewCheckinContainer");
});

不幸的是，IE不支持任何这些事件。它确实有自己的事件可以部分完成工作，但是 - onpropertychange 。这可以在 innerHTML 的值发生变化时通知您，但仅限于直接子项的修改，而不是所有后代的修改。

Answer 2

我知道处理这种情况的唯一方法是Mutation事件。

http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-eventgroupings-mutationevents

这些事件仍然没有得到广泛支持;但是你有像

这样的事件

• onsubtreemodified
• onnodeinserted
• onnoderemoved
• ondomnoderemovedfromdocument
• ondomnodeinsertedintodocument
• onattrmodified
• oncharacterdatamodified

您可能还想查看类似的帖子：

Detect element content changes with jQuery

Answer 3

jQuery有一个更改事件，但它仅用于用户输入字段（浏览器触发这些事件）。您列出的DIV的操作必须来自代码。那么为什么不找到操作的位置，然后在那里添加你需要的逻辑呢？

我前段时间发现了一篇很棒的文章"Custom events in jQuery open doors to complex behaviors"

这涵盖了您可以使用自定义绑定执行的一些很酷的操作。但是你仍然需要触发一个触发器，这意味着操纵改变div内容的代码来触发触发器，或者设置一个定时间隔来监视div的内容以获得触发触发器的更改（我不建议这样做） - 因为它不是即时的，并导致不必要的开销）。