Question

有div和拖曳点击事件

HTML：

<div class="noSel"></div>

JS：

$('.noSel').on('click', function(){
    alert('noSel');
    $(this).removeClass('noSel').addClass('sel');
});

$('.sel').on('click', function(){
    alert('sel');
    $(this).removeClass('sel').addClass('noSel');
});

第一次点击应警告＆＃34; noSel＆＃34;

第二次点击应警告＆＃34; sel＆＃34;

但始终提醒＆＃34; noSel＆＃34;

HTML：

<div id="div" class="noSel"></div>

JS：

$('#div').on('click', function(){
    if($(this).hasClass('sel')){
        alert('sel');
        $(this).removeClass('sel').addClass('noSel');
    }else{
        alert('noSel');
        $(this).removeClass('noSel').addClass('sel');
    }
});

这种方式还可以，但还有其他办法吗？

Answer 1

您必须为动态侦听器使用实时委派。否则，您必须使用.off()和classes手动重新绑定它。 jQuery只会注册一次普通的侦听器，而不是更改可能$(document).on('click', '.noSel', function() { alert('noSel'); $(this).removeClass('noSel').addClass('sel'); }); $(document).on('click', '.sel', function(){ alert('sel'); $(this).removeClass('sel').addClass('noSel'); });。

function sel() {
    alert('sel');
}

function noSel() {
    alert('noSel');
}

$('.noSel').on('click', function() {
    noSel();

    // you will not need to change classes, but you can
    // $(this).removeClass('noSel').addClass('sel');

    $(this).off('click').on('click', sel);
});

$('.sel').on('click', function() {
    sel();

    // you will not need to change classes, but you can
    // $(this).removeClass('sel').addClass('noSel'):

    $(this).off('click').on('click', noSel);
});

长版本（手动方式）可能看起来像这样：

{{1}}

Answer 2

原因是当你绑定监听器时，jQuery将找到符合特定选择器的所有元素，并在它们上绑定监听器。即使您将元素更改为不再符合该选择器，也将调用相同的事件侦听器。

我认为你自己的建议很好。

jquery改变了类但仍然发生了旧事件

2 个答案: