jQuery - Trigger Event on .children().size() change

Question

I have searched near and far but I can't figure out how to put a listener on the size() of children elements. What I am trying to do is:

I have a div with anywhere from 0-6+ child elements. This number isn't defined because I am making a shopping cart. Instead of onclick for every button that can change the number of items in the cart (i.e. add to cart btn, empty cart button, change quantity, etc...) I want to have a listener that when $("#cart").children().size() changes, an if statement checks if the #of different items in the cart is larger than 3. If so change the height of the div.

an example of the shopping cart layout:

<div id='cart'>
     <div class='item'></div>
     <div class='item'></div>
</div>

The actual code site is at: http://www.jamesendres.com/projects/ad/throw-pillows.html

Answer 1

I'm affraid div doesn't have the change event, so it would be impossible to listen it. On the other hand, you can create your own handler to get over this situation.

I've create a fiddle showing the proof of concept: link.

The code is very simple and I think you can understand it easily. Hope this helps.

Answer 2

You probably want "DOMNodeInserted" event.like:

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

See this answer: https://stackoverflow.com/a/5033719/907753