Question

我有一个<i>元素，其中包含comment-action edit-comment类。

我正在关注此元素的click事件，一旦触发，我会向所有这些disabled添加其他类<i>：

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

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

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

不幸的是，:not()选择器似乎被完全忽略，因为点击<i>同时还有类disabled仍会触发事件监听器。

我还尝试了更具可读性的形式：

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

具有相同的结果（正如我所料）。

知道捕获的地方吗？

Answer 1

当您设置事件时，您将直接在匹配的每个元素上设置它们。注释动作和编辑注释类的所有内容在加载页面时都有事件。即使你添加：not（.disabled），因为这些元素在页面加载时没有禁用类，它会匹配。

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

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

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

Answer 2

<强>原因：

的问题

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

和

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

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

<强>解决方案：

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

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

    /* Code Here */
});

jQuery：没有应用选择器

2 个答案: