Question

I have this code:

<div class="show">Hello</div>

With script:

$('.show').click(function() {
    $(this).removeClass('show');
    $(this).addClass('pop');
   alert("show");
});
$('.pop').click(function() {
    $(this).removeClass('pop');
    $(this).addClass('show');
   alert("pop");
});

So what I was hoping would happen is you would click Hello and it would say show. Then next time it would say pop. It would then alternate between the two. However it is stuck on show.

I guess some how I need to rebind the event.

Can someone help me with this?

http://jsfiddle.net/Kgak9/

Answer 1

Use on instead.

$('body').on('click', '.show', function() {
    $(this).removeClass('show');
    $(this).addClass('pop');
   alert("show"); 
});
$('body').on('click', '.pop', function() {
    $(this).removeClass('pop');
    $(this).addClass('show');
   alert("pop");
});

demo