JQuery event handler not firing after changing class

Question

I\'m trying to have the span, on click, toggle its classes between .btn-warning and .btn-primary. However, my code only works for the first click. Ever

Answer 1

You need to use event delegation method because you're binding event to dynamically added class element:

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

---

Simply you may do like this:

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