Probleme mit zwei Klassen

Question

können Sie sich bitte diese Demo ansehen und mir mitteilen, warum ich toggleClass('glyphicon-remove glyphicon-ok') in diesem Code nicht verwenden kann?

var Phase; 
 
$(".btn-default").on("click", function(){ 
 
$(this).find('.glyphicon').toggleClass("glyphicon-remove glyphicon-ok"); 
 

 
});

label.btn { 
 
    margin-bottom: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
} 
 
    span { 
 
     display: block; 
 
     padding: 6px 12px; 
 
    } 
 

 
    input[type=checkbox] { 
 
     display: none; 
 
    } 
 

 
    input:checked + span { 
 
     display: block; 
 
     color: #fff; 
 
     background-color: #285e8e; 
 
    } 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
<div class="container"> 
 
<div class="btn-group"> 
 
    <label class="btn btn-default"><input name="phase" type="checkbox" value="A"><span><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> A</span></label> 
 
    <label class="btn btn-default"><input name="phase" type="checkbox" value="B"><span><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> B</span></label> 
 
    <label class="btn btn-default"><input name="phase" type="checkbox" value="C"><span><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> C</span></label> 
 
</div> 
 
    </div>

Answer 1

Dies ist wegen der synthetic* Klick auf input getan. In der Tat wird Click-Ereignis zweimal auf Label-Ebene ausgelöst.

Eine Lösung ist durch Ereignisziel zu filtern:

var Phase; 
 
$(".btn-default").on("click", function(e) { 
 
    if (!$(e.target).is('input')) return; 
 
    $(this).find('.glyphicon').toggleClass("glyphicon-remove glyphicon-ok"); 
 
});

label.btn { 
 
    margin-bottom: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
} 
 

 
span { 
 
    display: block; 
 
    padding: 6px 12px; 
 
} 
 

 
input[type=checkbox] { 
 
    display: none; 
 
} 
 

 
input:checked+span { 
 
    display: block; 
 
    color: #fff; 
 
    background-color: #285e8e; 
 
} 
 

 

 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
<div class="container"> 
 
    <div class="btn-group"> 
 
    <label class="btn btn-default"><input name="phase" type="checkbox" value="A"><span><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> A</span></label> 
 
    <label class="btn btn-default"><input name="phase" type="checkbox" value="B"><span><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> B</span></label> 
 
    <label class="btn btn-default"><input name="phase" type="checkbox" value="C"><span><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> C</span></label> 
 
    </div> 
 
</div>

* Anmerkung: See spec

Wenn ein User-Agent laufen synthetischen Klick Aktivierungsschritte auf ein Element, muss der Benutzer-Agent Pre-Click-Aktivierungsschritte auf dem Element dann ausführen feuern Sie ein Klick-Ereignis am Element ab. Die Standardaktion dieses Klickereignis muss sein, um Post-Klick-Aktivierungsschritte für das Element auszuführen. Wenn das Ereignis abgebrochen wird, muss der Benutzeragent die abgebrochenen Aktivierungsschritte für das Element ausführen.