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

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

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

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

使用jQuery，我如何监控父（使用css类：tabcontent）div的任何更改，如添加新的子项（使用css类：chat_incoming）

我在这里没有可以用来监视div的单击事件，也没有在chat messenger窗口加载后立即加载div。聊天启动可能在用户登录后的任何时候发生，在此之前，父div不会为聊天创建子div

我自己做了一些没有去任何地方的家庭作业

对于jQuery，我有点理解，我可能必须使用“.on”来监视已经可用/动态创建的div的事件，但是我这里没有一个click事件可以与jQuery.on（）一起使用

我的下一个猜测是使用

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

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

感谢您的指导

---

谢谢。

您的jQuery正在查找

tabcontent

，而不是

.tabcontent

。与名为

tabcontent

的标记一样，不是名为

tabcontent

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

你可以试试这个

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

---

希望这有帮助

您不是在寻找名为tabcontent的类，而是在寻找名为tabcontent的元素，将其更改为

.tabcontent

，而不是

tabcontent

，这样在

.tabcontent

标记中进行更改时效果会非常好。@Asad我不确定OP是否想要演示中显示的内容。在实时聊天中，当您收到新消息时，检查内容会更容易，但这取决于您收到新消息的方式。@voigtan非常感谢您的回复。这是一个愚蠢的错误！：-）我被我在这方面所做的研究搞得心神不宁，错过了比赛。非常感谢您的更正。Abhilash和@voigtan，感谢您的回复。

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