Click event after toggleClass

Click event after toggleClass

I would like to switch between two buttons(span) - (one element active
when the other is not and vice versa).
The problem here is that primary element never actually looses the bind,
even though i remove the class from it. The same thing happens to other
element, except that effect is the opposite.
HTML:
<span id="ch1">First</span>
<br />
<span id="ch2" class="action">Second</span>
CSS:
body {
font-size:20px;
font-weight:bold;
}
.action {
cursor:pointer;
font-size:14px;
}
JS:
$('.action').on('click',function(){
$('#ch1,#ch2').toggleClass('action');
});
FIDDLE: http://jsfiddle.net/n2WUn/