jquery: Ändern der Klasse (aber nicht) Ändern der Aktion

Question

Ich fand ein seltsames Verhalten .. sicherlich ist bekannt, aber ich weiß nicht, wie es zu beheben ist.

Ich habe eine Schaltfläche, die abhängig von der aktuellen Klasse 2 verschiedene Aktionen ausführen muss.

Wenn Sie darauf klicken, schaltet er seine Klasse, auf diese Weise bei der nächsten Klick wird eine andere Aktion machen .. aber weiterhin die „alte“ Aktion auszuführen, wie Klasse hat

Um nicht geändert mehr klar ...

hier die relativen Fiddle

Sie sehen, dass, wenn Sie klicken A es AAA und die beiden Tasten schreiben s wechseln ihre Klasse (seit Farben geändert hat): also alles OK

scheint Aber wenn Sie wieder klicken A statt BBB des Schreibens, das, was sollte, ist geschehen, wenn class b Taste gedrückt wird, es wieder schreibt AAA

Natürlich kann man 2 Knöpfe für die Aktion 2 haben und die 2 Knöpfe umschalten, anstatt die Klasse auszutauschen, aber ich würde gerne verstehen, wenn ich etwas falsch mache oder der Grund für dieses seltsame Verhalten.

Grüße

Answer 1

Sie benötigen Ereignis Delegation verwenden, wie Sie das Hinzufügen und Entfernen Klassen, die für die Bindung von Veranstaltungen genutzt werden:

$('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