javascript - jQuery .on() 不会在点击时触发，而是立即触发

Question

当我单击一个按钮时，我会更改其 ID 并通过添加类 toMenu 对其应用新样式。我想要做的是，当我单击具有新 ID menu 的按钮时，它会添加另一个类 menuTransition。但现在发生的情况是，当我单击具有旧 ID #button 的按钮时，它已经添加了 menuTransition 类。但它应该做的是，在单击具有新 ID #menu 的按钮之前，不要添加类 menuTransition。
这是我的代码:

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

Answer 1

您所看到的有点竞争条件。通过按钮单击事件处理程序，您可以向按钮添加类和 ID。然后，使用委托(delegate)的事件处理程序，您可以查找文档上的任何点击，甚至是从后代元素中冒出的点击，并在那里添加一个类。处理此问题的一种方法是添加一个小的(约 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，以便事件处理程序仅在第一次单击按钮后触发。