切换类时，jQuery on（）不起作用

Question

[edit] THIS CODE DOES WORK

Found out had multiple on() handlers on the same event/class. [/edit]

I'm using the following code:

$selector.on('click', '.heya', function($e){
     alert('heya');
     jQuery(this).attr('class', 'byebye');
});


$selector.on('click', '.byebye', function($e){
     alert('byebye');
     jQuery(this).attr('class', 'heya');
});

Now clicking one of the elements once works correctly, but when clicking it again both callbacks are called. Somehow the previous "on()" trigger did not get removed. Anyone knows why? I know I can solve this issue differently, but this would be the cleanest solution...

Answer 1

Use addClass and removeClass methods instead.

$selector.on('click', '.heya', function($e){
     alert('heya');
     $(this).removeClass("heya").addClass("byebye");
});

$selector.on('click', '.byebye', function($e){
     alert('byebye');
     $(this).removeClass("byebye").addClass("heya");
});

Answer 2

Try this this will help you to solve your problem.

$(".heya").on('click', function($e){
     alert('heya');
     $(this).attr('class', 'byebye');
});


$(".byebye").on('click', function($e){
     alert('byebye');
     $(this).attr('class', 'heya');
});

Answer 3

Try this code:

$(".heya,.byebye").on('click', function($e){

     $(this).toggleClass('byebye heya');

});

JSFiddle