jQuery Forum

Hi,
I'm trying to imitate a very very simple music player with just one button that changes (play or pause).
I want to do that simply by changing a div's class. But there's a trick I don't understand.

1.     $('.buttonPause').click(function(event){
           event.preventDefault();
           $(this).removeClass('buttonPause');
           $(this).addClass('buttonPlay');
           alert('pause click');
       });
       
       
   
       $('.buttonPlay').click(function(event){
           event.preventDefault();
           alert('play click');
       });

The thing is:
Imagine you have a button in 'pause state'. When you click it 'pause click' alerts (OK), button is now in 'play state' (OK). But when I click it now in the play state, I would expect a "play click" alert, but to my surprise  "pause click" alert comes up again.

Try it and see.

When i check it in firebug, classes are changed as expected (image changes correctly), just functions with wrong/old selectors are called..

Any idea why this happend? Same results in FF, Chrome and Opera.

Thank you in advance.