jquery selection with .not()

Question

I have some troubles with jQuery. I have a set of Divs with .square classes. Only one of them is supposed to have an .active class. This .active class may be activated/de-activated onClick.

Here is my code :

    jQuery().ready(function() {
 $(".square").not(".active").click(function() {
  //initialize
  $('.square').removeClass('active');

  //activation
  $(this).addClass('active');

  // some action here...
 });

 $('.square.active').click(function() {
  $(this).removeClass('active');
 });
    });

My problem is that the first function si called, even if I click on an active .square, as if the selector was not working. In fact, this seems to be due to the addClass('active') line...

Would you have an idea how to fix this ? Thanks

Answer 1

Just to give something different from the other answers. Lonesomeday is correct in saying the function is bound to whatever they are at the start. This doesn't change.

The following code uses the live method of jQuery to keep on top of things. Live will always handle whatever the selector is referencing so it continually updates if you change your class. You can also dynamically add new divs with the square class and they will automatically have the handler too.

$(".square:not(.active)").live('click', function() {
    $('.square').removeClass('active');
    $(this).addClass('active');
});

$('.square.active').live('click', function() {
    $(this).removeClass('active');
});

Example working: http://jsfiddle.net/jonathon/mxY3Y/

Note: I'm not saying this is how I would do it (depends exactly on your requirement) but it is just another way to look at things.

Answer 2

This is because the function is bound to elements that don't have the active class when you create them. You should bind to all .square elements and take differing actions depending on whether the element has the class active:

$(document).ready(function(){
    $('.square').click(function(){
        var clicked = $(this);
        if (clicked.hasClass('active')) {
            clicked.removeClass('active');
        } else {
            $('.square').removeClass('active');
            clicked.addClass('active');
        }
    });
});