CODEWITHSUNDEEP
jquery
Filth
Filth

Reputation: 3228

jQuery | Remove Active Class

Having a hard time understanding what exactly is going on here. I have a hamburger for a navigation icon that when a user clicks the icon, add an active class to the element.

For some reason I can't console.log when the active class is on the element?? The reason I want to be able to do this is if the user clicks on the hamburger when it is active to go back to it's "non" active state.

Here is my jQuery

var nav = $('.nav-toggle'),
    activeNav = $('.nav-show');

nav.on("click", function(e){
    e.preventDefault();
    $(this).addClass('nav-show');
});

activeNav.on("click", function() {
    console.log("clicked active nav");
});

JSFIDDLE DEMO

Upvotes: 0

Views: 153

Answers (2)

ray
ray

Reputation: 171

Try whit this:

var nav = $('.nav-toggle');

nav.on("click", function(e){
    e.preventDefault();
    var $this = $(this);
    if ( $this.hasClass('nav-show') ) {
        $(this).removeClass('nav-show');
        alert("asdas");
        console.log("clicked active nav");
    } else {
        $(this).addClass('nav-show');
    }

});

Code here

Upvotes: 1

SeanCannon
SeanCannon

Reputation: 78046

That's because the bindings are already set on whichever one is active when you declare your variable, and when you change the class, you're not re-applying bindings. Just bind to a wrapper element and delegate the events instead :

Change activeNav.on("click", function() {

to $('.some-static-container-div').on('click', '.nav-show', function () {...

Upvotes: 2

Related Questions