jQuery .not() not working properly

Question

I've looked around and researched why this isn't working, but it seems that I am in a sort of different situation.

I have a default action for a navigation item that handles the navigation animation on hover:

$('.logoCont').hover(function(){
    someFunction()...
}, function (){
    someFunctionReverse()...
});

Now, when it comes to being on the mobile screen, I hide the navigation and place a button there. The button then controls the animation of the menu sliding out from the side. I've added a line of code that adds a class to the navigation elements when this button is clicked.

$('.mobile-menuButton').click(function(){ //When you click the menu-show button
    if($(this).hasClass('menuClosed')){ //Check to see if the menu is closed
        $('.nav_hover').addClass('mobile_open'); //Add the mobile_open class to the navigation items
    } else {
        $('.nav_hover').removeClass('mobile_open'); //remove it
    }
});

So then I changed the first hover function to say:

$('.nav_hover').not('.mobile_open').hover(function(){
    someFunction()...
}, function (){
    someFunctionReverse()...
});

I was hoping this would stop the someFunction() from happening when the mobile menu is out.

You can view what I'm doing HERE - When you reduce the screen to under 540px the media query will take effect and you can click on the menu button.

Documentation on .not() HERE. The second example at the end of the page is exactly what I was hoping for.

Believe it or not, `.not()` works as it's supposed to. It's your code that's broken. — Blue Skies, Nov 29 '13 at 19:11
From your docs link: *"Remove elements from the set of matched elements."* That's exactly what's happening. — Blue Skies, Nov 29 '13 at 19:13
@BlueSkies Thanks, I thought this meant that out of anything I am trying to select, remove those elements to do that action to. Isn't this exactly what I want it to do? and why would it still be selecting those specific elements? — ntgCleaner, Nov 29 '13 at 19:20
What do you mean by "still selecting"? DOM selection is a one-time occurrence. You're selecting a set of elements, removing some from the set, then applying the event handlers to the resulting sub-set. If you add or remove the class that you used in the DOM selection, or in the `.not()` filter, that doesn't make it go back in time and apply or remove the handlers. — Blue Skies, Nov 29 '13 at 19:25
I see. That makes a lot of sense, Thank you. Would it be easier to start with a class then if I click on the button, remove the class? Or could I use `.on()`? — ntgCleaner, Nov 29 '13 at 19:26
The `.on()` method is just another way of binding the handlers, but it does have an option for using event delegation, which would be useful for your purpose. Before using event delegation, do a quick web search so that you understand what's happening. — Blue Skies, Nov 29 '13 at 19:31
use delegation, see this similar question http://stackoverflow.com/questions/14842762/is-there-a-way-to-unbind-a-delegated-event-on-each-element-instance — gillyspy, Nov 29 '13 at 21:09

adeneo · Answer 1 · 2013-11-29T20:06:55.283

1

The class is added later and the event handler is attached to any and all elements that match the selector at pageload (or whenever it is executed) and doesn't really care about what you add later.
You have to check for the class inside the event handler

$('.nav_hover').hover(function(){
    if ( !$(this).hasClass('mobile_open') ) {
        someFunction()...
    }
}, function (){
    if ( !$(this).hasClass('mobile_open') ) {
        someFunctionReverse()...
    }
});

delegation could also work, but it wouldn't really work with not() or hover()

$(document).on({
    mouseenter: function() {
        someFunction()...
    },
    mouseleave: function() {
        someFunctionReverse()...
    }
}, '.nav_hover:not(.mobile_open)');

edited Nov 29 '13 at 20:06

answered Nov 29 '13 at 19:11

adeneo

312,895
29
395
388

I'm trying this now, though it seems this is not working either. Do I need to do a `.on()` for the mobile-menuButton click? – ntgCleaner Nov 29 '13 at 19:20
Ooops, there was a typo in the answer, try it now! – adeneo Nov 29 '13 at 19:26
Hmm still not working. I'm playing around with what Blue Skies is saying. I'm not initializing this on load, so the DOM won't read it. – ntgCleaner Nov 29 '13 at 19:29
Delegation would work by using a selector like `".nav_hover:not(.mobile_open)"` with `mouseenter` and `mouseleave` events. – Blue Skies Nov 29 '13 at 19:30
The first one should work just fine, and if it doesn't, something else is probably the problem, as it's a really simple concept of just checking for a class. I added the delegated version of the event handler as well, and that should work, but there could be issues with `:not()` when used this way, as the selector passed doesn't really select elements, it just filters them the same way the first function does really – adeneo Nov 29 '13 at 20:09

jQuery .not() not working properly

1 Answers1