使用 JQuery 监控 HTML Div 的动态变化答案

【问题标题】：Monitor for dynamic changes to HTML Div using JQuery使用 JQuery 监控 HTML Div 的动态变化
【发布时间】：2012-11-21 12:44:01
【问题描述】：

我有一个基于浏览器的聊天应用程序，其中为每个聊天创建单独的 div。
整个聊天由外部模块管理，我无权访问他们的代码。

请注意，任何地方都没有 id，只有为聊天窗口动态创建的 div 的 css 类名。

每当新的聊天对话开始时，都会在父 div（css 类：'tabcontent'）下为该聊天创建一个新 div（css 类：chat_incoming）。

使用 jQuery，我如何监视父级（使用 css 类：tabcontent）div 是否有任何更改，例如添加新子项（使用 css 类：chat_incoming）？

我这里没有可用于监视 div 的单击事件，也没有在聊天信使窗口加载后立即加载 div。用户登录后可能会随时发起聊天，在此之前父 div 不会为聊天创建子 div。

我自己做了一些功课，但没有成功。

使用 jQuery，我有点明白我可能必须使用 '.on' 才能监控已经可用/动态创建的 div 的事件，但我没有点击事件可用于 JQuery .on( ）。

我的下一个猜测是使用

$('tabcontent').bind('DOMNodeInserted DOMNodeRemoved', function(event) {alert('hi')});

但由于某种原因，这似乎也不起作用？（见小提琴here）

任何指导表示赞赏。

谢谢。

【问题讨论】：

您不是在寻找名为 tabcontent 的类，而是在寻找名为 tabcontent 的元素，请将其更改为 .tabcontent 而不是 tabcontent
当您在 .tabcontent 标记中进行更改时，这非常有效：jsfiddle.net/WTJq6/46。
@Asad 我不确定 OP 是否想要演示中的内容。在实时聊天中，收到新消息时更容易查看内容，但这取决于您接收新消息的方式。
@voigtan 非常感谢您的回复。这是一个愚蠢的错误！ :-) 被我在这方面所做的所有研究冲昏了头脑，错过了“。”。非常感谢您的指正。

【解决方案1】：

您的 jQuery 正在寻找 tabcontent，而不是 .tabcontent。就像在一个名为tabcontent 的标签中一样，而不是一个名为tabcontent 的类

改变它，它应该开始工作（希望，如果脚本中的其他一切都很好）

$('.tabcontent').bind('DOMNodeInserted DOMNodeRemoved', function(event) {alert('hi')});

【讨论】：

【解决方案2】：

你可以试试这个..

$(".tabcontent").bind("DOMSubtreeModified", function() {
    alert("tree changed");
});

希望对你有帮助

【讨论】：