Question

Possible Duplicate:
Detect element content changes with jQuery

I have a wrapper div say

<div id="placesNewCheckinContainer" style="display:none">
</div>

If at run time any Dom element is inserted/Deleted inside that placesNewCheckinContainer, I want a fire a jQuery function.
Help me how to implement this.
Thanks

Answer 1

There’s no convenient way of doing this in a totally cross browser manner. Firefox, Chrome and Safari all support the DOMSubtreeModified event which will fire for any modifications to the DOM inside a particular element. The aforementioned browsers and Opera support DOMNodeInserted and DOMNodeRemoved, which will also do the job.

$("#placesNewCheckinContainer").bind("DOMNodeInserted DOMNodeRemoved", function () {
    alert("Something happened inside #placesNewCheckinContainer");
});

Unfortunately, IE doesn’t support any of those events. It does have its own event that can partially do the job, however – onpropertychange. This can notify you when the value of innerHTML changes, but only for modifications to direct children, not all descendants.