jQuery - Cannot Remove Class

Question

I cannot seem to remove the class 'foo' and I do not understand why. When the user clicks on .foo jQuery is suppose to remove .foo. At first glance it seems to work as the text is no longer red. However, clicking .foo several times will result in the alert box appearing thus meaning .foo has not completely been removed. I do not understand why this is happening.

jQuery:

$(document).ready(function() {
    $('.foo').click(function() {
        $(this).removeClass('foo');
        alert('Class .foo should have been removed. Why is this alert still appearing?');
    });             
});​

html:

<p class="foo">foo</p>​

css:

.foo { color: red; }​

http://jsfiddle.net/Nvrp8/

Answer 1

You need to unbind the click listener.

http://jsfiddle.net/Nvrp8/2/

$(document).ready(function() {
    $('.foo').click(function() {
        $(this).removeClass('foo');
        alert( 'Class .foo should have been removed. Why is this alert still appearing?' );     
        $(this).unbind('click');        
    });             
});​

Answer 2

If you use on() it actually evaluates the selector for each click because the event is bound to body, not to ".foo"

$(document).ready(function() {
    $("body").on("click", ".foo",function() {
        $(this).removeClass('foo');
        alert( 'Class .foo should have been removed. Why is this alert still appearing?' );       
    });             
});​

http://jsfiddle.net/Nvrp8/8/