jQueryの.on（）メソッドがブートストラップで失敗する

Question

ページにブートストラップを含める前に完全に正常に機能した2つのラジオボタンがあります。なぜブートストラップが単純な.on（）jQueryメソッドに干渉するのかわかりません... onClickのようなさまざまなメソッドを試してみたので、私は狂ってしまいました。

私が含まれてきましたブートストラップライブラリ：

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 

jQueryのブートストラップを含む前に働いていたテストに使用：

$(document).ready(function(){ 
    $('#button2').on('click', function() { 
     alert('it works!'); 
    }); 

    $('#button1').on('click', function() { 
     alert('it works!'); 
    }); 
}); 

テストHTML：

<div class='btn-group oneLine' data-toggle='buttons'> 
    <label class='btn btn-primary'> 
     <input type='radio' name='options' id='button1' autocomplete='off'> <a class='test'>Button 1</a> 
    </label> 

    <label class='btn btn-primary'> 
     <input type='radio' name='options' id='button2' autocomplete='off' checked> <a class='test'>Button 2</a> 
    </label> 
</div> 

私は（ブートストラップが付属せず）以下のライブテスト用のコードを追加しました：あなたはjqueryのものの後、ブートストラップJSが含まれている必要があり

$(document).ready(function(){ 
 
    $('#button2').on('click', function() { 
 
    alert('it works!'); 
 
    }); 
 

 
    $('#button1').on('click', function() { 
 
    alert('it works!'); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class='btn-group oneLine' data-toggle='buttons'> 
 
    <label class='btn btn-primary'> 
 
    <input type='radio' name='options' id='button1' autocomplete='off'> <a class='test'>Button 1</a> 
 
    </label> 
 

 
    <label class='btn btn-primary'> 
 
    <input type='radio' name='options' id='button2' autocomplete='off' checked> <a class='test'>Button 2</a> 
 
    </label> 
 
</div>

Answer 1

私はなぜブートストラップはシンプル.on（）jQueryのメソッドを妨害するかわからない...

• clip: rect(0,0,0,0)：クリップCSSプロパティは、要素の部分が表示されるかを定義。

• pointer-events: none：CSSプロパティのpointer-eventsは、特定のグラフィック要素がマウスイベントのターゲットになる可能性がある環境（存在する場合）を制御できます。これらの2つのスタイルを削除するか、別のアプローチを考えてみます。

は今、次の2つの戦略を持っています。

あなたのラジオボタンはラベルの中に含まれています。各クリックイベントはラベルまたはアンカーから取得され、ラジオボタンには何も渡されません。

これは、イベントハンドラは、ラベルに添付しなければならないことを意味します

$('#button2').closest('.btn') 

あなたがAttribute Starts With SelectorとquerySelectorを使用してコードの行数を減らすことができます。

代わりに、ラベルを直接使用することもできます。

スニペット：

$(document).ready(function(){ 
 
    $('[id^="button"]').closest('.btn').on('click', function() { 
 
    console.log(this.querySelector('input').id + ': it works!'); 
 
    }); 
 

 
    $('div.btn-group.oneLine label.btn').on('click', function() { 
 
    console.log('An alternative way is to use the label: ' + this.querySelector('input').id + ': it works!'); 
 
    }); 
 

 
});

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

 
<div class='btn-group oneLine' data-toggle='buttons'> 
 
    <label class='btn btn-primary'> 
 
     <input type='radio' name='options' id='button1' autocomplete='off'> <a class='test'>Button 1</a> 
 
    </label> 
 

 
    <label class='btn btn-primary'> 
 
     <input type='radio' name='options' id='button2' autocomplete='off' checked> <a class='test'>Button 2</a> 
 
    </label> 
 
</div>

Answer 2

チェックを。例hereを参照してください。あなたの例では2.2.1を使用していますが、ブートストラップ1.12ではjqueryのバージョンの互換性もチェックしてください。 ：「ブートストラップ」は、各無線入力要素について、次の2つのスタイルが追加されますので、たまたま