jQuery: изменение класса (но не) изменение действия

Question

Я нашел странное поведение. Конечно, знаю, но я не знаю, как это исправить.

У меня есть кнопка, которая должна выполнять 2 разных действия в зависимости от текущего класса.

При нажатии она переключает свой класс, таким образом, в следующем щелчком сделает другое действие .. но он продолжает выполнять «старые» действия, как класс не был изменен

Чтобы быть более ясно ...

здесь относительная Fiddle

вы можете увидеть, что при нажатии кнопки A пишет AAA и две кнопки s переключить их класс (с цвета изменился): поэтому, кажется, все в порядке

Но если нажать еще раз кнопку A вместо того, чтобы писать BBB это то, что должно произойти при нажатии class b кнопку, он снова пишет AAA

Очевидно, может быть 2 кнопки для действия 2 и переключить 2 кнопки вместо обмена классом, но я хотел бы понять, что я делаю что-то неправильно или причина этого странного поведения.

С уважением

Answer 1

Вы должны использовать делегирование события, как вы добавление и удаление классов, которые используются для связывания событий:

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