I am dealing with a browser-based chat application where separate div elements are generated for each chat conversation. An external module oversees the entire chat process, and I do not have access to its underlying code.
It is important to note that there are no identifiers used within the code; only CSS class names are assigned to the dynamically created chat divs.
Every time a new chat session begins, a new div (with the CSS class: chat_incoming) is added as a child under the parent div (with the CSS class: tabcontent).
My question is how can I use jQuery to monitor the parent div (with the CSS class: tabcontent) for any changes such as the addition of a new child div (specifically one with the CSS class: chat_incoming)?
My challenge is that I do not have a click event or the immediate presence of the chat div upon window loading. Chat conversations can be initiated at any time after a user logs in, therefore causing the parent div to remain empty until then.
I attempted some research on my own but did not make much progress.
Although I grasp the concept that using '.on' in jQuery may be necessary to observe events for both pre-existing and dynamically generated divs, the lack of a click event poses a difficulty when implementing .on().
As a potential solution, I tried:
$('tabcontent').bind('DOMNodeInserted DOMNodeRemoved', function(event) {alert('hi')});
However, this approach does not seem to yield the desired results either (refer to the provided fiddle here).
Any assistance or guidance on this matter would be greatly appreciated.
Thank you.