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＆lt; 9，它是depreciated。主要的变化是创建一个函数，如果它们是容器中的4个子节点，它将调用divFull事件。

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。

特定条件下的触发事件

2 个答案: