Why Jquery on() function does not work with class?

Question

I'm trying to add and remove the class on click event. I'm adding and removing the three classes onclick event of .the-old , its working properly.

Onclick Event (.the-old)

1. add class on button tag (.the-new)
2. Add and remove class on ids #navbar-hamburger-01 and #navbar-closed

JS

$(function() {

  $('.the-old').on('click',  function() {
        //alert('..');
     $('#navButtonToggle').addClass('the-new');
     $('#navButtonToggle').removeClass('the-old');
       $('#navbar-hamburger-01').addClass('hidden');
       $('#navbar-closed').removeClass('hidden');    
    });

    $('.the-new').on('click',  function() {
        alert('..');

       $('#navbar-hamburger-01').removeClass('hidden');
       $('#navbar-closed').addClass('hidden');    
    });

});

HTML

<button id="navButtonToggle" type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle repnsive-navbar-toggle the-old">
    <div id="navbar-hamburger-01">
    <span class="sr-only">Toggle navigation</span>

    <span class="icon-bar"></span>

    <span class="icon-bar"></span>

    <span class="icon-bar"></span>
    </div>
    <div id="navbar-closed" class="hidden">
    <span class="glyphicon glyphicon-remove"></span>
    </div>
</button>

But this function does not working $('.the-new').on('click', function() {}) , even i just try to alert , but it does not working. However class .the-new is properly adding onclick event of the-old . Can any guide me where i'm wrong.

Answer 1

The reason for this already explained in previous answer. To make it work you can integrate either of these changes

    <button id="navButtonToggle" type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle repnsive-navbar-toggle the-old">
        <div id="navbar-hamburger-01">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        </div>
        <div id="navbar-closed" class="hidden">
        <span class="glyphicon glyphicon-remove"></span>
        </div>
    </button>
<script>
  $(function() {
          $('.the-old').on('click',  function() {
                //alert('..');
             $('#navButtonToggle').addClass('the-new');
             $('#navButtonToggle').removeClass('the-old');
               $('#navbar-hamburger-01').addClass('hidden');
               $('#navbar-closed').removeClass('hidden');    
            });
           $('.the-new').on('click',  function() {
                alert('..');
            $('#navbar-hamburger-01').removeClass('hidden');
               $('#navbar-closed').addClass('hidden');    
            });
       });
    </script>

OR

delegate the event without making any changed to HTML

$(function() {

  $('body').on('click','.the-old', function() {
        //alert('..');
     $('#navButtonToggle').addClass('the-new');
     $('#navButtonToggle').removeClass('the-old');
       $('#navbar-hamburger-01').addClass('hidden');
       $('#navbar-closed').removeClass('hidden');    
    });

    $('body').on('click','.the-new'function() {
        alert('..');

       $('#navbar-hamburger-01').removeClass('hidden');
       $('#navbar-closed').addClass('hidden');    
    });

});

Answer 2

When you register the event handlers for click, the class the-new does not exist so when you actually register it nothing happens.

You need to register it inside the handler of add-new . This is however risky because you need to "de-register" it once the-new is removed or else you will: 1) Have duplicate handlers that grow on every click. 2) Handle the-XXX event even if its not logically what you meant.

I would suggest creating a common base css class for the element and working on it, checking what is the state, then adding the right class accordingly. You already do it when you register the 1st handler via element ID.

Also note that in the callback you don't need to do a DOM query for the element, you can get it from the $event parameter supplied when the handler gets invoked.

See the jQuery docs for that.