3

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/

2
  • Works for me fine in chrome. The alert still appears because that's what you told it to do in the funciton. onClick>removeClass>alert()
    – Kyle
    Aug 31, 2012 at 17:16
  • Yes, after lots of clarification I know understand that removing the class would not remove the listener that is attached to the element. I guess my question should have been 'how to remove a listener that is attached to an element'.
    – Jon
    Aug 31, 2012 at 17:31

4 Answers 4

5

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');        
    });             
});​
7
  • Is there another alternative then unbinding the click listener? I intend to continue to use the click event listener on .foo.
    – Jon
    Aug 31, 2012 at 17:18
  • 1
    @icu222much The click listener is only unbound for the current element. It will continue to work on other .foo elements. jsfiddle.net/Nvrp8/6
    – mittmemo
    Aug 31, 2012 at 17:19
  • @icu222much You don't have to unbind it at all. The class is removed without unbinding, as it should. See the jsfiddle in my answer. Aug 31, 2012 at 17:20
  • @kdg123 Yes, but I need to use the click listener on all .foo elements
    – Jon
    Aug 31, 2012 at 17:22
  • @JeffFabiny Thank you Jeff. I will take a look at your fiddle.
    – Jon
    Aug 31, 2012 at 17:22
4

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/

0
3

When you run $('.foo'), you get a static set of elements that have class="foo" at that time. So, even if you removeClass('foo') from those elements at a later time, you still bound the listener to that original set of elements.

If you want to change that behavior, consider looking at .on or .delegate.

0
1

It's working just fine, the listener is still bound. http://jsfiddle.net/Nvrp8/5/

5
  • I am confused why the alert is still appearing even though that element has .foo removed from it. From my understanding, the click() function should only be toggled if the user clicks on .foo class. If the .foo is removed, how come the alert is still toggled?
    – Jon
    Aug 31, 2012 at 17:25
  • @icu222much The listener is attached to the element still! It doesn't matter that it doesn't have the class .foo anymore. It may not have that class, but it still has the listener bound to it.
    – mittmemo
    Aug 31, 2012 at 17:27
  • 1
    @kdg123 Ah, I see. I understand. I think .on should solve my problem.
    – Jon
    Aug 31, 2012 at 17:29
  • @icu222much Perhaps you mean you want to remove the class AND the listener, but ONLY on this element? That is, clicking .foo will remove the class and listener, but other .foo elements will continue to have their listeners? Aug 31, 2012 at 17:31
  • @JeffFabiny I wanted to unassociate class on this element, but keep the listener. My goal is that once the class has been removed from this .foo element, the alert box will stop appearing. .on has solved my problem.
    – Jon
    Aug 31, 2012 at 17:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.