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

Question

我正在尝试添加和删除click事件上的类。 我要添加和删除.the-old的三个类onclick事件，它可以正常工作。

Onclick事件（.the-old）

1. 在按钮标签上添加类（.the-new）
2. 在ID #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

当您注册用于click的事件处理程序时， 新类不存在，因此当您实际注册它时，什么也不会发生。

您需要在add-new的处理程序中注册它。 但是，这样做存在风险，因为一旦删除了新的内容，您需要“注销”它，否则您将：1）每次单击都有重复的处理程序。 2）处理-XXX事件，即使这在逻辑上不是您的意思。

我建议为该元素创建一个通用的基本CSS类并对其进行处理，检查状态是什么，然后相应地添加正确的类。 通过元素ID注册第一个处理程序时，您已经完成了操作。

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

请参阅jQuery文档。