Событие триггера по конкретному состоянию

Question

У меня есть div, который будет служить контейнером для другого элемента, у меня есть кнопки, которые добавляют элемент к этому div.

Пожалуйста, см. demo, чтобы получить представление об этом.

Итак, что я хочу сделать, это проверить, прежде чем добавить новый элемент является ДИВ достигнуто максимальное количество элементов, которые я определяю, скажем 4.

я могу проверить это условие перед каждым добавить, но Я уверен, что это не лучший способ (мы узнали, что если код содержит копию/вставку, это не лучшее решение). Кроме того, это всего лишь образец, в моем случае у меня много кнопок.

Is есть способ, чтобы такой слушатель?

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

Так что я могу отключить кнопки ..

Answer 1

Во-первых, вы должны слушать события изменения DOM, то вы можете вызвать пользовательское событие на основе числа детей

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

то вы можете привязать к пользовательскому divFull событий

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

working demo основано на вашем примере

Answer 2

Я немного изменить в @skafandri метод, так как событие DOMSubtreeModified не работает на IE < 9, и это depreciated. Главное изменение заключается в создании функции, которая будет вызывать событие divFull, если в контейнере находится 4 ребенка.

var checkFull = function() { 
    if ($container.children().length === 4) { 
     $container.trigger('divFull'); 
    } 
} 

$('#button1').click(function(){ 
    $container.append('<div class="element">some text</div>'); 
    checkFull(); 
}); 

Адрес the demo.