web-dev-qa-db-ja.com

bootstrapラジオボタングループ内で発生しないクリックイベント

ラジオボタンを動的に作成し、on（）関数を使用してクリックをキャプチャし、それを使って何かを実行しようとします。

ラジオボタンを使用している限り、問題なく機能しました。次に、ラジオボタンをbootstrapマークアップ内にカプセル化してボタングループに変換します。ボタンをクリックすると、クリックイベントは発生しません。

ここにコードがあります

動的に生成されるマークアップ

 <div id="q_opt" class="btn-group" data-toggle="buttons">
        <label class="btn btn-default active" id="d_op_0"> <input id="q_op_0" name="op" type="radio" value="0">22%
    </label>
    <label class="btn btn-default" id="d_op_1"> <input id="q_op_1" name="op" type="radio" value="1">19%
    </label>
    <label class="btn btn-default" id="d_op_2"> <input id="q_op_2" name="op" type="radio" value="2">11%
    </label>
    <label class="btn btn-default" id="d_op_3"> <input id="q_op_3" name="op" type="radio" value="3">42%
    </label>
    <label class="btn btn-default" id="d_op_4"> <input id="q_op_4" name="op" type="radio" value="4">8%</label>
</div>

JQueryセレクタを介してラジオを選択し、クリックが発生したかどうかを確認するマークアップを次に示します

$(document).on('click', 'input:radio[id^="q_op_"]', function(event) {
    alert("click fired");
}

bootstrap何らかの方法で干渉している-またはいくつかのステップを逃していますか？私はコードを見つめていて、私の目はもうミスをキャッチしていません。

（PS-ラジオボタンは見栄えの良いボタングループに変換され、ボタンはクリックされたボタンをクリックして押されたままになります。そのため、クリックがon（..）によって登録されないことを除いて、動作は問題ないようです）

jqueryasp.net-mvctwitter-bootstraptwitter-bootstrap-3asp.net-mvc-5
37
Gerry

ラベルでクリックが発生しているため、代わりに変更ハンドラーを使用します

$(document).on('change', 'input:radio[id^="q_op_"]', function (event) {
    alert("click fired");
});

デモ： フィドル

62
Arun P Johny

私もこれに挑戦しました。しかし、ラジオボタンにeventListenersを配置する代わりに、ラベルにそれらを配置します。

$('#d_op_1').on("click",function(){ 
   alert("click fired"); 
});
16
user1587439

入力のonchange（）属性を使用します。

<input id="3" name="option" type="radio" style="height: 15px;width: 15px;" onchange="alert('changed')">
1
Ravi Wadje