使用JQuery监视HTML Div的动态更改

Question

我有一个基于浏览器的聊天应用程序，其中为每个聊天创建了单独的div。

整个聊天过程是由一个外部模块管理的，我无法访问他们的代码。

请注意，这里没有ids，只有为聊天窗口动态创建的div的css类名。

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

使用jQuery，我如何监控父目录(使用css class:tabcontent) div中的任何更改，比如新添加的子目录(使用css class:chat_incoming) ?？

我在这里没有可以用来监控div的click事件，也没有在聊天信使窗口加载之后立即加载div。聊天发起可以在用户登录之后的任何时间发生，并且在此之前，父div不会为聊天创建子div。

我自己也做了一些功课，但什么也没做。

对于jQuery，我有点理解我可能必须使用'.on‘来监控已经可用/动态创建的div的事件，但是我这里没有click事件来与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')});

Answer 2

你可以试试这个..

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

希望这能有所帮助