jQuery Toggle Класс не работает

Question

Вы можете посмотреть This Demo или сообщить мне, почему .toggleClass() не уточняет здесь?

$(function() { 
    $("#cluster-box").on("click", function() { 
     $('#cluster-info').toggleClass("fa-th-large fa-fax"); 
    }); 
}); 

<div class="container"> 
<div class="btn-group" role="group" aria-label="..."> 
    <button type="button" class="btn btn-default btn-sm navbar-btn">Left</button> 
    <button type="button" class="btn btn-default btn-sm navbar-btn">Middle</button> 
    <label class="btn btn-default btn-sm navbar-btn" id="cluster-box"> <input type="checkbox" id="cluster" class="hidden" checked=""><i id="cluster-info" class="fa fa-fax"></i></label>  
</div> 
</div> 

Answer 1

Для каждого щелчка ваш обработчик событий запускается дважды. Сначала установите флажок, а затем пузырь до #cluster-box. В результате, классы переключаются дважды, и, следовательно, вы не видите разницы.

$("#cluster-box").on("click", function (_event) { 
    console.log('handler triggered!'); 
    $('#cluster-info').toggleClass("fa-th-large fa-fax"); 
}); 

Использование console.log() как выше, вы будете в состоянии видеть, что обработчик становится срабатывает дважды.

Вместо того чтобы слушать click на #cluster-box, прослушивание change Событие на #cluster решит это. Demo

$("#cluster").on("change", function (_event) { 
    $('#cluster-info').toggleClass("fa-th-large fa-fax"); 
});