jQuery .on（）不會在點擊時觸發，但會立即觸發

Question

單擊按鈕時，將更改其ID並通過將一個類添加到toMenu來對其應用新樣式。 我想做的是，當我單擊帶有新ID menu的按鈕時，它添加了另一個類menuTransition 。 但就現在的情況是，它已經增加了類menuTransition當我點擊的老ID按鈕#button 。 但是，什么是應該做的，是不是添加類menuTransition與新標識的按鈕，直到#menu被點擊。
這是我的代碼：

$(document).ready(function() {
    $("#button").click(function(){
                $("#button").addClass("toMenu")
                $("#button").attr("id","menu");
    });
});
$(document).on("click", "#menu", function() {
        $("#menu").addClass("menuTransition");
});

Answer 1

您所看到的是一些競爭狀況。 使用按鈕單擊事件處理程序，您可以向按鈕添加類和ID。 然后，使用委派的事件處理程序，您將尋找文檔上的所有單擊，甚至是從子元素中冒出來的單擊，並在其中添加一個類。 解決此問題的一種方法是增加一個較小的延遲（〜1毫秒）以使這種競爭短路，這通常在示例代碼中會發生。

 $(document).ready(function() { $("#button").click(function() { $("#button").addClass("toMenu") setTimeout(function() { $("#button").attr("id", "menu"); }, 1) }); }); $(document).on("click", "#menu", function() { $("#menu").addClass("menuTransition"); }); 

 .toMenu { font-weight: bold; } .menuTransition { color: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="button"> button </button> 

通過添加1毫秒的延遲，在單擊按鈕到達文檔事件處理程序之后添加ID，以便僅在第一次單擊按鈕后才觸發事件處理程序。

Answer 2

您不應該更改ID。 元素ID旨在為靜態的。 您可以使用一個類來標記按鈕/菜單的當前狀態，並使其表現為相應的狀態（同時避免在$(document)上使用效率低下的委托事件處理程序：

$(document).ready(function() {
    $("#menubutton").on('click', function() {
        var $this = $(this);
        if ($this.hasClass('toMenu')) {
           $this.addClass('menuTransition');
        } else {
           $this.addClass('toMenu');
        }
    });
});