为什么Jquery on（）函数不能用于类？

Question

我尝试在点击事件中添加和删除课程。我正在添加和删除.the-old的三个类onclick事件，它正常工作。

Onclick事件（.the-old）

1. 在按钮标记上添加类（.the-new）
2. 在ids #navbar-hamburger-01和#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>

但是这个功能不起作用$('.the-new').on('click', function() {})，即使我只是尝试alert，但它不起作用。但是，.the-new类正在添加the-old的onclick事件。可以指导我在哪里错了。

Answer 1

之前的答案已经解释了这个原因。为了使其工作，您可以集成这些更改中的任何一个

    <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>

或

委派事件而不对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

当注册用于点击的事件处理程序时， the-new 类不存在，所以当您实际注册时没有任何反应。

您需要在 add-new 的处理程序中注册它。 然而，这是有风险的，因为一旦 the-new 被移除，您需要“取消注册”它，否则您将： 1）具有在每次点击时增长的重复处理程序。 2）处理 the-XXX 事件，即使它在逻辑上不是你的意思。

我建议为元素创建一个公共基础css类并对其进行处理，检查状态是什么，然后相应地添加正确的类。 当您通过元素ID注册第一个处理程序时，您已经这样做了。

另请注意，在回调中，您不需要对元素执行DOM查询，您可以从调用处理程序时提供的$ event参数中获取它。

请参阅jQuery文档。