jQuery Question on .click events?

[Noel Forte]

Hello!

I’m having an issue with getting this script to run properly. Is there something I’m missing?

$('.site-navigation #menu-button').on('click', function(){
    $('.site-navigation #menu-button').addClass('open');
});
$('.site-navigation #menu-button.open').on('click', function(){
    $('.site-navigation #menu-button').removeClass('open');
});

Thanks!

[Senff]

Syntax-wise, it’s good. Structure-wise, it depends.

The problem might be that both statements could be executed. I’m wondering if this is what happend: when you click on the button, the first statement will add a class “open” to it. Then the second statement is read: since the button now has the class “open”, it will remove it again.

Or, lets say the button already has the class “open”. In that case, both statements will be relevant. You click on the button, it adds the class “open” (which it already has), the next statement says to remove it.

Maybe look into jQuery’s hasClass option?

[Noel Forte]

Does the computer catch on fire?

Ha! No, but that would make for a milestone in web development. :)

I can get the class to be added, but upon clicking again, the class doesn’t get removed.

Naturally, my first thought would be to do something like this:

$('.site-navigation #menu-button').click(function(){ 
    $('.site-navigation #menu-button').addClass('open');
});
$('.site-navigation #menu-button.open').click(function(){ 
    $('.site-navigation #menu-button').removeClass('open');
});

However, this doesn’t work either. I once heard that the .live is used to accomplish things like this, but that is now deprecated in favor of .on.

Still learning jQuery/Javascript, so I’m a lost when it comes to this stuff.

I’ll try out what you guys suggested, and post back if I have more issues.

[Senff]

However, this doesn’t work either.

Same possible/likely reason as what I described above. The class “open” will always be added because of the first statement.

[Noel Forte]

The problem might be that both statements could be executed. I’m wondering if this is what happend: when you click on the button, the first statement will add a class “open” to it. Then the second statement is read: since the button now has the class “open”, it will remove it again.

Oddly enough, I’m looking at the code, and it doesn’t seem like that’s happening…like I said, the class gets added, but doesn’t go away…that is assuming the web inspector tells no lies.

[Senff]

The first statement will ALWAYS be executed on click. The result is that it will always end up having the class “open”: http://codepen.io/senff/pen/CvrBp

Not sure why you don’t follow @traq’s suggestion. It’s clean and most importantly, it works: http://codepen.io/senff/pen/cCklA

[Noel Forte]

BOOM. Nicely done. I thought I overlooked something…thanks @Senff!

[Author]

Posts