為什么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文檔。