jquery：クラスを変更していますが（変化しません）

Question

私は奇妙な動作を発見しました。確かに分かっていますが、修正方法はわかりません。

現在のクラスに応じて2つの異なる操作を行う必要があるボタンがあります。

クリックすると、それはこのように、次のクリックでさまざまなアクションを行います、そのクラスを切り替えます。.. が、クラスがあるために

を変更していないようにそれは、「古い」アクションを実行し続けよりクリア...

ここ

相対Fiddle

あなたはボタンAをクリックしたとき、それはAAAと2つのボタンを書き込みことがわかりますしたがって、それはすべてOK

ようです。しかし、あなたがclass bボタンが押されたときにどうするかであることBBBを書くの再度ボタンAを代わりにクリックした場合、それが再び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