在特定條件下觸發事件

Question

我有一個div將作爲其他元素的容器，我有按鈕，該元素添加到該div。

請參閱demo瞭解它。

所以，我想要做的是檢查之前添加新元素是div達到我定義元素的最大數量，假設4

我可以檢查此條件下每增加過，但我相信這不是最好的方法（我們知道，如果代碼包含複製/粘貼，那麼不是最好的解決方案）此外，這僅僅是一個樣本，在我的情況下，我有很多按鈕..

是有辦法讓這樣的聽衆？

$('#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。 主要變化是創建一個函數，如果它的容器中有4個孩子，它將調用divFull事件。

​​3210

這裏是the demo。