Jquery on method firing only once

Question

I am having a problem here, i want to add and remove a class to a element and I am using on() method to handle the click event on body. The code works on the first click but after the first click it wont handle the event anymore! Below is the code:

    $('body').on('click', '#cshero-menu-mobile .cms-icon-menu', function(){

        var navigation = $(this).parents().find('#cshero-header-navigation');

        if(!navigation.hasClass('collapse')){
           navigation.addClass('collapse');
        }else if(navigation.hasClass('collapse')){
           navigation.removeClass('collapse');
        }
    });

This is a problem I am having with menu icon that appears on mobile and tablets and I want to open and close the menu when clicked! I tried putting an alert just below the first line of code and it will alerts only once! Any help is appreciated!

<div id="cshero-header-navigation" class="col-xs-12 col-sm-7 col-md-9 col-lg-9 phones-nav" style="z-index:999999;">
<div class="navigation-main">
    <div class="cshero-navigation-right hidden-xs hidden-sm icon-search-hidden">
        <div class="nav-button-icon">
        </div>
    </div>
    <nav id="site-navigation" class="main-navigation">
        <div class="menu-main-menu-container">
            <ul id="menu-main-menu" class="nav-menu menu-main-menu">
                <li>links</li>
                <li>links</li>
                <li>links</li>
                <li>links</li>
                <li>links</li>
            </ul>
        </div>
    </nav>
</div>

<div id="cshero-menu-mobile" class="collapse navbar-collapse">
     <i class="cms-icon-menu pe-7s-menu"></i>
</div>

This is my html code. In mobile view the menu will be opened only once!

Answer 1

So the issue is with your code: you forgot to include a comma , between #cshero-menu-mobile and .cms-icon-menu . Below is the recommended solution:

$('body').on('click', '#cshero-menu-mobile, .cms-icon-menu', function(){

    var navigation = $(this).parents().find('#cshero-header-navigation');

    if(!navigation.hasClass('collapse')){
       navigation.addClass('collapse');
    }else if(navigation.hasClass('collapse')){
       navigation.removeClass('collapse');
    }
});  

Rather than using on , you could simply use the click handler as well like so $('body').click('#cshero-menu-mobile, .cms-icon-menu', function(){... which would still work.

From what I can deduce, it would appear that you're trying to imitate Bootstrap 's accordion . I would recommend you use that instead.

Answer 2

Try this:

$('body').on('click', '#cshero-menu-mobile .cms-icon-menu', function(){
    $(this).parents().find('#cshero-header-navigation').toggleClass("collapse")
});

Answer 3

To every one interested, I fixed the problem, just changed the first line from

$('body').on('click', '#cshero-menu-mobile, .cms-icon-menu', function(){

to

$('body').click(function(){

this seams to bind the click event directly to body so a simple solution!