更改类后，JQuery事件处理程序不会触发

我试图在点击时设置跨度，在.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

 Click me 

Answer 1

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

所有代码都可以简化为：

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

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

  Click me 

Answer 2

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

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