Is there a jQuery event to determine when the list of children has changed?

Question

I hope to find a jQuery event that will tell me when the collection of items has grown or shrunk after adding / removing a child.

Answer 1

You can count the children first, then use the conditional operator to check if the quantity has changed.

<div> <span></span> <span></span> <span></span> <span></span> <span></span> </div> alert($('div').children().length); 

Answer 2

What you are looking for are the DOMNodeInserted and DOMNodeRemoved events.

For example, after binding to the list event of the DOMNodeInserted list:

 $('ol').bind('DOMNodeInserted', function() { alert('node inserted'); }); 

and then another list item is added:

 $('ol').append('<li>x</li>'); 

the event is fired.