Question

I have a browser based chat application where individual div’s are created for each chat.
The whole chat is managed by an external module and I don’t have access to their code.

Note that there are no ids anywhere, only css class names for the divs created dynamically for chat windows.

Whenever a new chat conversation starts, a new div for that chat (with css class:chat_incoming) is created under the parent div (with css class:’tabcontent’).

Using jQuery, how do I monitor the parent (with css class:tabcontent) div for any changes like new child addition (with css class:chat_incoming) ??

I don’t have a click event here that I can use to monitor the div and neither do I have the div loaded up right after the chat messenger window loads up. The chat initiation may happen anytime after the user logs in and until then the parent div would not have a child div created for chat.

I did some homework myself that went no where.

With jQuery, I kind of understood that I may have to use ‘.on’ to be able to monitor events for divs already available / created dynamically, but I dont have a click event here to use with the JQuery .on().

My next guess was to use

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

but for some reason this doesn’t seem to work either? (see fiddle here)

Any guidance appreciated.

Thank you.

Answer 1

Your jQuery is looking for tabcontent, not .tabcontent. As in a tag called tabcontent, not a class called tabcontent

Change that and it should start working (hopefully, if everything else is fine in the script)

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