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

Question

I have a div with a class name a . I attach a click-event to this div like

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

After this; element's class name changes from a to b . I want to attach second click event on .b like

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

First click event works fine however second one does not fire. See my JSfiddle.

Answer 1

Attach the click even to a higher element in the DOM - when you change the class, the event bubbling up will change, eg

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

Answer 2

You can add the second event after the first one has fired:

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

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

Answer 3

You're running the .b code at the beginning, when the element doesn't have class b. Try adding the new onClick handler in the code for your first onClick.

Code:

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