Question

我正在尝试通过点击，在.btn-warning和.btn-primary之间切换其类别。但是，我的代码仅适用于第一次单击。此后的每次点击都不起作用。

的JavaScript

$(document).ready(function(){

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

HTML

<span class="btn btn-warning" >Click me</span>

Answer 1

更改类不会神奇地添加先前添加的事件。您需要再次取消绑定/绑定事件，或使用知道如何处理它的通用onclick处理程序，或使用事件委派。

所有代码都可以简化为：

＆＃13;

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

＆＃13;

.btn-primary { background-color: blue; }
.btn-warning { background-color: yellow; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<span class="btn btn-warning" >Click me</span>

＆＃13;

Answer 2

您需要使用event delegation方法，因为您将事件绑定到动态添加的类元素：

$(document).ready(function(){

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

您可以这样做：

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

更改类后JQuery事件处理程序未触发

2 个答案: