Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript jQuery Question on .click events?

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #146843
    Noel Forte
    Participant

    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!

    #146845
    Senff
    Participant

    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?

    #146850
    Noel Forte
    Participant

    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.

    #146851
    Senff
    Participant

    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.

    #146852
    Noel Forte
    Participant

    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.

    #146854
    Senff
    Participant

    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

    #146855
    Noel Forte
    Participant

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

Viewing 7 posts - 1 through 7 (of 7 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.