Обработчик события JQuery не сбрасывается после смены класса

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

Вы должны использовать 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'); 
}); 

Answer 2

Изменение класса не волшебно добавить события, которые ранее были добавлены. Вам нужно снова или снова отключить/связать события или использовать общий обработчик onclick, который знает, как с ним обращаться, или использовать делегирование событий.

Все, что код может быть уменьшен до:

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

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

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