jquery: changement de classe (mais pas) changement d'action

Question

J'ai trouvé un comportement étrange .. sûrement est savoir mais je ne sais pas comment le réparer.

J'ai un bouton qui doit faire 2 actions différentes en fonction de la classe actuelle.

Lorsque vous cliquez dessus, il permet de basculer sa classe, de cette façon, à cliquer sur suivant fera une autre action .. mais il continue d'exécuter l'action « vieux », comme la classe n'a pas été modifié

Pour être plus clair ...

ici la Fiddle

vous pouvez voir par rapport que lorsque vous cliquez sur le bouton A il écrit AAA et les deux boutons s basculer leur classe (depuis les couleurs ont changé): il semble donc tout OK

Mais si vous cliquez à nouveau bouton A au lieu d'écrire BBB qui est ce qui devrait se produire lorsque le bouton class b est pressé, il écrit à nouveau AAA

Clairement peut avoir 2 boutons pour l'action 2 et bascule les 2 boutons au lieu d'échanger la classe, mais je voudrais comprendre si je fais quelque chose de mal ou la raison de ce comportement étrange.

Cordialement

Answer 1

Vous devez utiliser la délégation de l'événement que vous ajoutez et la suppression des classes qui sont utilisés pour des événements de liaison:

$('body').on('click','.a',function(){ 
    $('#R').html('AAA'); 
    $('#A').addClass('b').removeClass('a'); 
    $('#B').addClass('a').removeClass('b'); 
}); 
$('body').on('click','.b',function(){ 
    $('#R').html('BBB'); 
    $('#B').addClass('b').removeClass('a'); 
    $('#A').addClass('a').removeClass('b'); 
}); 

Working Demo