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