Javascript 为什么Jquery on（）函数不能与类一起工作？

我正在尝试添加和删除单击事件时的类。我正在添加和删除

的onclick事件的三个类。旧的
，它工作正常

Onclick事件（.old）
在按钮标记（.new）上添加类
在ids上添加和删除类
#navbar-hamburger-01
和
#navbar closed
JS
HTML

切换导航

但是这个函数不起作用。
$（'.the new'）。在（'click'，function（）{}）
上，即使我只是尝试发出
警报，但它不起作用。但是类
。新的
正确地添加了旧的
的onclick事件。有谁能告诉我哪里错了。
当你注册click的事件处理程序时，新的类不存在，所以当你真正注册它时，什么也不会发生

您需要在addnew的处理程序中注册它。
然而，这是有风险的，因为一旦新的被删除，您需要对其进行“注销”，否则您将：
1） 具有每次单击都会增长的重复处理程序。
2） 处理XXX事件，即使它在逻辑上不是您的意思

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

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

请参阅jQuery文档了解这一点。
原因已在前面的回答中解释。要使其工作，您可以集成这些更改中的任何一个

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

可能与jquery事件委派存在重复和其他几个问题
$（“父项”）。在（'click'，“delegatedItem”，function（）{\\actions}）
；最初执行JavaScript时会绑定事件。在程序执行周期的后期，类会发生更改，因此这些元素上的事件根本不会附加。@RayonDabre Ok，所以第二个函数由于类的更改而不起作用。是否有其他方法处理
的事件。新的
必须了解事件委派，其中事件附加到父元素，而父元素在执行期间不会更改。试试这个：
$（'body'）。在（'click'，'new'，function（）{}）上请考虑接受和投票回答未来的引用，如果在前面的答案中提供了原因和解释，那么应该接受这个权利吗？@ RayonDabre似乎你错了，前一个答案只解释它，但不给出解决方案你的答案也是不完整的……它只提供解决方案。解释。如果他删除了答案怎么办？引用别人的描述是没有意义的。你必须提及你自己的描述。不加解释的回答对未来的用户不会有帮助。不，竞态条件是并发代码的行为不可预测，因为两个或更多事件可能以任意顺序发生。（也就是说，有一场“竞赛”，看哪一场先发生。）。答案的其余部分并没有好到哪里去，这种示意性的建议应该放在评论中，如果有的话。如果OP的问题因为缺少细节而不允许“胡德”回答，那么应该首先对其进行改进。
<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>

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

$(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');    
    });

});