jquery按钮奇怪的类行为

我在这里创建了jsfiddle jsfiddle.net/ckAyF/

但是，在第一次单击后，它确实添加了btn成功类 但当第二次点击时，为什么会触发btn主事件？

---

请帮帮我，我看着你的小提琴。我不知道为什么它不起作用，但是这个代码起作用了

<button id="my-btn" type="button" class="btn btn-primary" style ="margin-right:10px;"> </button>

$(document).ready(function(){
    $('#my-btn').click(function() {
        if($(this).hasClass('btn-success')) {
            $(this).removeClass("btn-success");
            $(this).addClass("btn-primary");
        }
        else {
            $(this).removeClass("btn-primary");
            $(this).addClass("btn-success");
        }
      });
});

$（文档）.ready（函数（）{
$（“#我的btn”）。单击（函数（）{
if（$（this）.hasClass（'btn-success'））{
$（此）.removeClass（“btn成功”）；
$（此）.addClass（“btn主”）；
}
否则{
$（此）.removeClass（“btn主”）；
$（此）.addClass（“btn成功”）；
}
});
});

尝试在此处使用事件委派：

$(document).on('click','.btn-success', function() {
    $(this).removeClass("btn-success");
    $(this).addClass("btn-primary");
});

$(document).on('click','.btn-primary',function() {
    $(this).removeClass("btn-primary");
    $(this).addClass("btn-success");
});

您还可以使用缩短代码：

$(document).on('click','.btn-success, .btn-primary', function() {
    $(this).toggleClass("btn-success btn-primary");
});

---

这适用于一个按钮，但如何处理具有相同行为的多个按钮？您可以添加一个类而不是id#my btn，并触发该类的事件。