Question

当我点击一个按钮时，我会通过添加一个类toMenu来更改其ID并为其应用新样式。我想要做的是，当我点击具有新ID menu的按钮时，它会添加另一个类menuTransition。但现在发生的是，当我单击具有旧ID menuTransition的按钮时，它已经添加了类#button。但它应该做的是，在点击具有新ID 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');
        }
    });
});

jQuery .on（）不会立即触发点击

2 个答案: