Question

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

然而，在第一次点击后，它确实添加了btn-success类但是第二次点击时为什么会触发btn-primary事件？请帮帮我

Answer 1

我看着你的小提琴。我不知道为什么它不起作用，但这段代码可以工作。

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

Answer 2

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

$(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");
});

您也可以使用 toggleClass() 缩短代码：

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

<强> Fiddle Demo

jquery按钮奇怪的类行为

2 个答案: