1

我有一个 div 将用作其他元素的容器，我有将元素添加到该 div 的按钮。

请查看演示以了解它。

所以，我想做的是在添加新元素之前检查 div 是否达到了我定义的最大元素数，比如说 4。

我可以在每次添加之前检查这个条件，但我确信这不是最好的方法（我们了解到，如果代码包含复制/粘贴则不是最好的解决方案）另外，这只是一个示例，就我而言，我有很多按钮..

有没有办法拥有这样的听众？

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

这样我就可以禁用按钮..

4

2 回答 2

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);
});

基于您的示例的工作演示

于 2012-06-18T11:29:22.563 回答
0

我稍微更改了@skafandri 方法，因为该事件DOMSubtreeModified在 IE < 9 上不起作用并且已折旧。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();
});

这是演示。

于 2012-06-18T11:47:46.003 回答