JQuery: Using :not(.active) selector, and adding an Active class, to the item selected

Question

I'm new to Javascript and am having a bit of an issue with using a NOT selector, and adding a class during the function, hopefully this will make sense to someone.

I am creating a small gallery, and my goal is to have clickable navigation, however the active image will redirect to another page when clicked.

Code is as follows:

    $("ul#mainGallery li:not(.active) a").click(function(){
      var thisListClass = $(this).parent().attr('class');
         var activeListId = $(this).parent().attr('id');
         var newMarginLeft = (activeListId-3) * -200;
         var animateAction = {};
          animateAction['margin-left'] = newMarginLeft + 'px';
        $("ul#mainGallery").animate(animateAction, 1000);
        $('li.active img').animate({width:'100px', height:'100px'},1000)
        $(this + 'img').animate({width:'300px', height:'300px'},1000)
        $(li.active).removeClass('active');
        $(this).parent().addClass('active');
        return false;

I know there is likely a much better way to do this, but I can't get my head around it.

Edit: I should probably say what the problem is...

When an active image is clicked, it follows the hyperlink all is well.

When a non active image is clicked, it begins the animation, then (i assume) when the 'active' class is added, instead of returning false, it returns true and follows the hyperlink.

Answer 1

To stop the default behaviour use the preventDefault() function

$("ul#mainGallery li:not(.active) a").click(function(e){
   e.preventDefault(); // will stop the default behaviour
}

Read more on Jquery docs

Answer 2

You are binding the click event to $("ul#mainGallery li:not(.active) a") whenever that code is run (presumably on document load). The items which are not active at that point will have that item bound, and changing the class afterwards on other items won't bind this event to them. You will need to either change how you bind it or check inside the function whether the item has that class.

Something like this:

$("ul#mainGallery li a").click(function(){
if(!$(this).parent().hasClass('active')){


      var thisListClass = $(this).parent().attr('class');
         var activeListId = $(this).parent().attr('id');
         var newMarginLeft = (activeListId-3) * -200;
         var animateAction = {};
          animateAction['margin-left'] = newMarginLeft + 'px';
        $("ul#mainGallery").animate(animateAction, 1000);
        $('li.active img').animate({width:'100px', height:'100px'},1000)
        $(this + 'img').animate({width:'300px', height:'300px'},1000)
        $('li.active').removeClass('active');
        $(this).parent().addClass('active');
        return false;
}

EDIT, or if you prefer to continue using the same selector with the :not and everything, then switch your click function to .live()