jquery - 使用 JQuery 监控 HTML Div 的动态变化

Question

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

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

每当开始新的聊天对话时，都会在父 div(使用 css 类:'tabcontent')下为该聊天创建一个新的 div(使用 css class:chat_incoming)。

使用 jQuery，我如何监控父级(使用 css class:tabcontent)div 是否有任何更改，例如添加新的子级(使用 css class:chat_incoming)？？

我这里没有可用于监视 div 的单击事件，也没有在聊天消息窗口加载后立即加载 div。聊天启动可能会在用户登录后的任何时间发生，直到那时父 div 不会为聊天创建子 div。

我自己做了一些没有完成的作业。

使用 jQuery，我有点理解我可能必须使用“.on”才能监视已经可用/动态创建的 div 的事件，但我这里没有单击事件可与 JQuery .on( ).

我的下一个猜测是使用

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

但出于某种原因，这似乎也不起作用？ (参见 fiddle here)

感谢任何指导。

谢谢。

Answer 1

您的 jQuery 正在寻找 tabcontent，而不是 .tabcontent。在名为 tabcontent 的标签中，而不是在名为 tabcontent

的类中

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

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