jQuery :not 选择器未应用

Question

我有一个 <i> 元素有 class comment-action edit-comment.

我正在监听此元素上的 click 事件，一旦触发，我会向所有这些 <i> 添加额外的 class disabled：

$('.comment-action.edit-comment').on('click', function(){
    this.addClass('disabled');
    // another logic ...
});

这导致事件侦听器发生微小变化，因此

$('.comment-action.edit-comment:not(.disabled)').on('click', function(){ /* ... */ });

不幸的是，:not() 选择器似乎被完全忽略了，因为单击 <i> 同时 class disabled 仍然会触发事件侦听器。

我也试过更具可读性形式：

$('.comment-action.edit-comment').not('.disabled').on('click', function(){ /* ... */ });

结果完全相同（正如我所料）。

知道问题在哪里吗？

Answer 1

原因：

的问题

$('.comment-action.edit-comment:not(.disabled)')

和

$('.comment-action.edit-comment').not('.disabled')

是在绑定事件时检查选择器是否没有class disabled，而不是在事件发生时检查。

解法：

您可以检查目标元素在事件处理程序中是否有 disabled class。如果被点击的元素有class，你可以在事件处理程序的开头使用return false。这样handler代码就不会执行了。

$('.comment-action.edit-comment').on('click', function() {
    if ($(this).hasClass('disabled')) {
        return false;
    }

    /* Code Here */
});

Answer 2

当您设置事件时，您是在每个匹配的元素上直接设置它们。当页面加载时，带有 comment-action 和 edit-comment class 的所有内容都有事件。即使您添加 :not(.disabled)，因为这些元素在页面加载时没有禁用 class，它匹配。

您可以使用事件委托在父元素上设置事件，但仅当目标与您要查找的内容匹配时才会运行。

$(document).on('click', '.comment-action.edit-comment:not(.disabled)', function() { 
    //... 
});

创建委托事件处理程序的优点是只设置 1 个侦听器，而不是为与选择器匹配的每个元素设置一个侦听器。

jQuery :not 选择器未应用

jQuery :not selector is not applied

jquery

jquery-selectors