jquery – not selector,on()单击事件

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

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

问题是这个代码应该在选择的类添加一次之后触发,但是它正在执行很多次,我只是希望我的变量不增加.换句话说,我试图做以下(这是有效的,但我不想使用活动的功能,因为它已被弃用)：

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

非常感谢您的回复,
ķ

解决方法

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

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

另一个是委托事件 – 在这种情况下,父元素将在其后代的一个通知事件,并且将在决定触发事件处理程序(代码无耻粘贴)之前动态地检查所述后代是否满足过滤条件从本李的答案)：

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