在特定条件下触发事件

Trigger event on specific condition

本文关键字：事件 条件下      更新时间：2023-09-26

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

请参阅演示以了解它。

因此，我想做的是在添加新元素之前检查div是否达到了我定义的最大元素数，假设为4。

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

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

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

这样我就可以禁用按钮。

首先，你要监听 DOM change 事件，然后你可以根据孩子的数量触发一个自定义事件

$('#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);
});

基于您的示例的工作演示

我稍微改变了@skafandri方法，因为事件DOMSubtreeModified在IE <9上不起作用并且已贬值。主要更改是创建一个函数，如果容器中有 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();
});

这是演示。

相关文章：