jQuery click function acting strange when adding/removing classes

Question

I have two list items that, when clicked, should change classes from '.off' to '.on'. Only one element should be '.on' at a time so when one is already turned on and the other is clicked both elements should change classes from '.off' to '.on' and vice versa. If a list item with a class of '.on' is clicked it should change classes to '.off'

The problem I am having is when a list item with class '.on' is clicked it still runs the click function as if it had a class of '.off'

My html:

<ul>
    <li><a href="about" class="off">ABOUT</a></li>
    <li><a href="upload" class="off">SUBMIT</a></li>
</ul>

My javascript (running on jQuery 1.7.1)

$('.off').click(function(event) {
    event.preventDefault();
    $(".on").addClass("off").removeClass("on");
    $(this).addClass("on").removeClass("off");
});
$('.on').click(function(event) {
    event.preventDefault();
    $(this).addClass("off").removeClass("on");
});

Does anyone know what is going on here? Is there something wrong in my code or have I encountered some sort of bug here?

http://jsfiddle.net/ZC3CW/6/

Answer 1

The selectors you're using to bind the event using click() are used to select the elements to add the event handler to. The selector is not considered when the handler is run.

You should be looking for something more like this:

$('li').click(function(event) {
    event.preventDefault();

    if ($(this).hasClass('off')) {
        $(".on").addClass("off").removeClass("on");
        $(this).addClass("on").removeClass("off");
    } else { // $(this).hasClass('on');
        $(this).addClass("off").removeClass("on");
    }
});

You might want to make the li selector more explicit by adding a class/id to the ul or li's.

To confuse things further, you could also do this (if you're using jQuery > 1.7);

$(document).on('click', '.off', function(event) {
    event.preventDefault();
    $(".on").addClass("off").removeClass("on");
    $(this).addClass("on").removeClass("off");
});
$(document).on('click', '.on', function(event) {
    event.preventDefault();
    $(this).addClass("off").removeClass("on");
});

This is because the .on() function works by attaching the event handler to the selected elements (document), and will only execute the handler (the function) on the event specified (click) if the element that the event originated from matches the selector .off at the time the event fired, not at binding time.

Answer 2

I would suggest adding a click handle to a different selector, this should work for you...

$("ul li a").click(function(e){
   e.preventDefault();

   if($(this).hasClass("off")){
      $("ul li a").addClass("off").removeClass("on");
      $(this).addClass("on").removeClass("off");
   }
   else{
      $(this).addClass("off").removeClass("on");
   }
});

Answer 3

The problem is that jQuery handlers get attached at page load and remain the same regardless of changing their classes. Use live('click', handler) on('click', handler) instead of click().

Edit: just noticed that .live() is deprecated in jQuery 1.7.

Answer 4

The problem as I see it is that your "on" class is not in play at the time of the click event, so your $('.on').click method is never being called.

Try re-assigning your events after changing classes (example follows) :

var assignClicks = function () {
    $('.off').click(function(event) {
        event.preventDefault();
        $(".on").addClass("off").removeClass("on");
        $(this).addClass("on").removeClass("off");
        assignClicks();
    });
    $('.on').click(function(event) {
        event.preventDefault();
        $(this).addClass("off").removeClass("on");
        assignClicks();
    });
};
assignClicks();

Hope this helps,

Pete

Answer 5

The click is bound to the element not the class. Maybe you can attach the events to the

elements and detect/toggle the elements classes:

$('li').click(function(event) {
    event.preventDefault();
    if( $(this).hasClass('on') ) {
        $(this).removeClass('on');
    }
    else {
        $(this).addClass('on');
        $(this).siblings().removeClass('on');
    }
});