类名称更改后，将第二个单击事件附加到元素

Question

我有一个类名为a的div 。 我将点击事件附加到该div上，例如

$('.a').on('click',  function() {
    $(this).removeClass('a').addClass('b');
})

在这之后; 元素的类名从a变为b 。 我想在.b上附加第二点击事件

$('.b').on('click', function() {
    $(this).removeClass('b').addClass('c');
})

第一次点击事件可以正常运行，但是第二个不会触发。 参见我的JSfiddle。

Answer 1

将点击甚至附加到DOM中的较高元素-更改类时，冒泡的事件将发生变化，例如

$("body").on("click", ".b", function() {
    $(this).removeClass('b').addClass('c');
});

Answer 2

您可以在第一个事件触发后添加第二个事件：

$('.a').on('click',  function() {
    $(this).removeClass('a').addClass('b');

    $('.b').on('click', function () { /* ... */ });
})

Answer 3

当元素没有类b时，您在一开始就运行.b代码。 尝试在代码中为您的第一个onClick添加新的onClick处理程序。

码：

$('.a').on('click',  function() {
$(this).removeClass('a').addClass('b');
        $('.b').on('click', function() {
    $(this).removeClass('b').addClass('c');
    })
})

Answer 4

 $(".a").click(function() { $(this).removeClass("a").addClass("b"); $(".b").click(function() { $(this).removeClass("b").addClass("c"); }) })