jQuery: .not() after .addClass() and .removeClass()

Question

I'm making a navigation for a website and would like the buttons to behave like this:

Have the active button 40px higher than the others.
Move buttons 10px higher on hover, unless it's the active button.
When a button is clicked, remove active class from all buttons, move all of them to the original position, add active class to clicked button, move clicked button 40px higher.

This is my jQuery code:

$(document).ready(function(){
    $('#navigation a').not(".active")
    .mouseover(function(){
            $(this).stop().animate(
                    {top:"-10px"}, 
                    {duration:200}
            )
    })
    .mouseout(function(){
            $(this).stop().animate(
                    {top:"0px"}, 
                    {duration:200}
            )
    })
    .click(function(){
            $('#navigation a.active').animate(
                    {top:"0px"}, 
                    {duration:200}
            )
            $('#navigation a').removeClass("active");
            $(this).addClass("active");
            $(this).stop().animate(
                    {top:"-40px"}, 
                    {duration:200}
            )
    })
});

Everything seems to work and the classes are being given and removed properly. The only problem is that the not() method keeps blocking the initial active button, and not the ones who have gotten the class later with addClass().

[eventDeligation.](https://learn.jquery.com/events/event-delegation/). Your handler only gets attached to those elements that not have the class `active`. Not the elements that you later give the class `active`. — putvande, Apr 17 '14 at 14:41
use `.on` to register the event handlers (see the discussion in the [api docs on the **deprecated** `.live`](http://api.jquery.com/live/). — collapsar, Apr 17 '14 at 14:43
Or check active class inside handler, e.g: `if($(this).hasClass('active')) return;` (and remove the `not()` filtering part) — A. Wolff, Apr 17 '14 at 14:43
possible duplicate of [In jQuery, how to attach events to dynamic html elements?](http://stackoverflow.com/questions/1359018/in-jquery-how-to-attach-events-to-dynamic-html-elements) — Blazemonger, Apr 17 '14 at 14:53

Blazemonger · Answer 1 · 2014-04-17T15:00:13.047

Change

$('#navigation a').not(".active")
    .mouseover(function(){
        // ...
    }).mouseout(function() {
        // ...
    }).click(function() {
        // ...
    });

to use event delegation:

$('#navigation').on('mouseover', 'a:not(.active)', function(){
    // ...
}).on('mouseout', 'a:not(.active)', function(){
    // ...
}).on('click', 'a:not(.active)', function(){
    // ...
});

or shorter:

$('#navigation').on({
    'mouseover': function(){
        // ...
    },
    'mouseout': function(){
        // ...
    },
    'click': function(){
        // ...
    }
}, 'a:not(.active)');

https://api.jquery.com/on/

jQuery: .not() after .addClass() and .removeClass()

1 Answers1