Javascript on（）不'；不要按一下就开火，而是立即开火

当我单击一个按钮时，我会更改它的ID，并通过在菜单中添加一个类

来应用新样式。我想做的是，当我单击带有新ID
菜单的按钮时，它会添加另一个类
menuTransition
。但现在发生的是，当我单击带有旧ID的按钮时，它已经添加了类
menuTransition
。但是它应该做的是，在单击带有新ID的按钮之前，不要添加类
menuTransition
#menu
。

这是我的密码：

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

你现在看到的是一种比赛状态。使用按钮单击事件处理程序，您将向按钮添加一个类和一个ID。然后，使用委托事件处理程序，您可以查找对文档的任何单击，甚至是从子元素中弹出的单击，并在其中添加一个类。处理这一问题的一种方法是添加一个小的（~1毫秒）延迟来缩短这场比赛，这通常会在您的示例代码中发生


$（文档）.ready（函数（）{
$（“#按钮”）。单击（函数（）{
$（“#按钮”）.addClass（“toMenu”）
setTimeout（函数（）{
$（“#按钮”）.attr（“id”、“菜单”）；
}, 1)
});
});
$（文档）。在（“单击”，“菜单”，函数（）上）{
$（“#菜单”）.addClass（“菜单转换”）；
});
.toMenu{
字体大小：粗体；
}
menuTransition先生{
颜色：红色；
}

按钮
您不应该更改ID。元素ID是静态的。您可以使用类标记按钮/菜单的当前状态，并使其相应地运行（同时避免
$（文档）
上低效的委托事件处理程序）：

这可能会容易得多（问题本身将变得毫无意义）如果你不更改
id
。标识符真的不需要更改，你为什么要这样做？这段代码的目的是什么？是的，你的代码没有多大意义…只要从一开始就将菜单作为id，你就不会有任何问题。问题是，按钮首先不是菜单。然后它向左滑动，并得到一个独立的id个人风格，并获得id
菜单
。我想，没有什么好的理由来更改现有元素的id。id应该是静态的，类可能是动态的。只使用类是可能的，但我更容易处理代码的上下文。每个人都有自己的编码方式：）非常感谢。成功了。我已经想到，它添加id可能太早了，但我尝试添加一个
.delay（1）
，但没有成功。你的答案非常有效：）@TobiasGlaus，请不要这样做。修正代码，不要更改ID。从长远来看会更好。
$(document).ready(function() {
    $("#menubutton").on('click', function() {
        var $this = $(this);
        if ($this.hasClass('toMenu')) {
           $this.addClass('menuTransition');
        } else {
           $this.addClass('toMenu');
        }
    });
});