jquery更改了类，但仍激发旧事件

有一个div和tow click事件

HTML:

第一次点击时应提醒“鼻子”

第二次单击时应提示“sel”

但要时刻警惕“鼻子”

HTML:

---

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

您必须使用动态侦听器的实时委派。否则，您必须使用

.on（）

和

.off（）

手动重新绑定。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);
});

---

您必须对动态侦听器使用实时委派。否则，您必须使用

.on（）

和

.off（）

手动重新绑定。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);
});

---

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

---

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

原因是，当您绑定侦听器时，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);
});