jquery - 不是选择器，on()点击事件

Question

我在执行以下代码时遇到一些问题:

    var i = 1;  
$('.hello:not(.selected)').on('click',function(){
    $(this).addClass('selected');       
    console.log(i++);   
});

问题是这段代码应该在添加所选类后只触发一次，但它执行了很多次，我只是希望 i 变量不要增加。换句话说，我正在尝试执行以下操作(可行，但我不想使用 live 函数，因为它已弃用):

$('.hello:not(.selected)').live('click', function () { 
   $('.hello').removeClass('selected');
   $(this).addClass('selected');
... 
});

非常感谢您的提前回复，k

Answer 1

您的代码正在采用当前满足此条件的元素集:

$('.hello:not(.selected)')

并设置此事件处理程序永久:

.on('click',function(){
    $(this).addClass('selected');
    $(this).css({opacity : 0.5});       
    console.log(i++);   
});

特别重要的是，一旦在元素上设置了处理程序，即使稍后该元素不再满足条件，它也会继续处于事件状态(在这种情况下，通过获得选定的类)。

有多种方法可以实现所需的行为。一种是动态检查“过滤”条件是否仍然保留在事件处理程序中:

$('.hello').on('click',function(){
    if($(this).hasClass('selected')) {
        return;
    }
    $(this).addClass('selected');
    $(this).css({opacity : 0.5});       
    console.log(i++);   
});

另一种方法是委托(delegate)事件 - 在这种情况下，父元素将收到其后代之一的事件通知，并且它会动态检查所述后代是否满足之前的过滤条件决定触发事件处理程序(代码无耻地从 Ben Lee 的答案中粘贴):

$('body').on('click', '.hello:not(.selected)', function() {
    $(this).addClass('selected');
    $(this).css({opacity : 0.5});       
    console.log(i++);
});