Question

I have a div that will serve as container to other element, I have buttons that add element to that div.

Please see the demo for a get an idea about it.

So, what I want to do is to check before adding a new element is the div reached a maximum number of elements that I define, let’s say 4.

I can check this condition before every add, but I am sure this is not the best way (we learned that if the code contains copy/paste then is not the best solution) Also, this is just a sample, in my case, I have many buttons..

Is there a way to have a listener like this?

$('#container').bind('divFull', function(){
    //My code
});

So that I can disable buttons..

Answer 1

First, you have to listen to DOM change event, then you can trigger a custom event based on the number of children

$('#container').bind('DOMSubtreeModified', function(){
    if($(this).children().length>=4){
        $(this).trigger('divFull');
    }
});

then you can bind to your custom divFull event

$('#container').bind('divFull', function(){
    alert('container is full');
    $('button').prop('disabled',true);
});

a working demo based on your example