動的に挿入されたテーブル行内のブートストラップスイッチの使用

Question

動的に挿入されたテーブル行<tr>内でBootstrap Switchを使用しています。私は挿入するテーブル行のHTMLは次のようになります。

<tr id="reference"><td>name</td><td></td><td><input type="checkbox" name="checkbox1" class="slider" data-size="mini" checked></td><td><a href="#"><i class="fa fa-object-ungroup"></i></a></td><td></td><td><a href="#"><i class="fa fa-trash"></i></a></td></tr> 

と挿入した後、私はその後、オン/オフスライダー上togglableに簡単なチェックボックスを変換され$("#reference input.slider").bootstrapSwitch();を呼び出します。これはすべて正常に動作します。

私が抱えている問題は、ブートストラップスイッチでイベントをキャプチャすることです。

行が動的に追加されているように、私は

$("#user-area-table tbody").on('click', 'switchChange.bootstrapSwitch', function(evt) { 
    console.log('bootstrap switch change'); 
)}; 

を試みたが、オン/オフ状態の変化が発生した場合、これが到達することはありません。これを使用する

：

$("#user-area-table tbody").on('switchChange.bootstrapSwitch', function(evt) { 
    console.log('bootstrap switch change'); 
}); 

私はイベントのオン/オフを得ることができますが、$(this)は、単にtbodyであると私は、オン/オフが切り替えられた行に決定する必要があります。

Answer 1

evt.targetを使用すると、ブートストラップスイッチに関連付けられたDOM入力要素を取得できます。コールバックに渡されたイベントデータは、ここで詳細を読むことができjQueryのイベントオブジェクト、次のとおりです。https://api.jquery.com/category/events/event-object/

あなたはその要素を持っていたら、それはそうのように記載された行を見つけることができます。

$(evt.target).closest("tr"); 

その後、最寄のチェック現在の要素とは、この場合、最も近いTRタグに（セレクタに一致する最も近い要素を見つけるために、その祖先を通してDOMをUPになります。また

、これが失敗した理由：。

$("#user-area-table tbody").on('click', 'switchChange.bootstrapSwitch', function(evt) { 
    console.log('bootstrap switch change'); 
)}; 

2番目の引数が実際にセレクタを探していますが、イベントを渡したためですか？タグ名がswitchChange、クラスがbootstrapSwitchの要素はありません。 .onの最初の引数だけがイベント名を受け入れます。そのため、2番目のバージョンが実際に呼び出されます。