2つのクラスを切り替える際に問題が発生する

Question

このデモをご覧になり、このスニペットでtoggleClass('glyphicon-remove glyphicon-ok')を使用できない理由をお知らせください。

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

これはinputで行わsynthetic*クリックのです。実際、クリックイベントはラベルレベルで2回発生します。

一つの解決策は、イベントのターゲットでフィルタリングすることである。

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>

*注：ユーザー・エージェントは の合成クリックアクティベーションの手順を実行することですSee spec

要素の場合、ユーザーエージェントは 要素でプレクリックのアクティブ化手順を実行し、次に要素でクリックイベントを発生させます。 のデフォルトアクションは、 エレメントのポストクリック起動ステップを実行するためのものでなければなりません。イベントがキャンセルされた場合、ユーザーエージェントは要素のアクティブ化手順をキャンセルして を実行する必要があります。