ブートストラップテーブル内のブートストラップの切り替え

Question

ブートストラップトグルスタイルのチェックボックスを使用しています（data-toggle = "toggle"）。これは完全に問題なく動作しています。しかし、このチェックボックスをブートストラップテーブル（data-toggle = "table"）の内側に置くと、ブートストラップトグルチェックボックスが正しく機能しなくなります。
特に、変更イベントは発生しますが、チェックボックス/ボタンはスライドのオン/オフ動作を表示しません。私は、これを含むテーブルにdata-toggle = "table"要素があるときだけ、これを絞り込むようにしました。
この問題が発生した人は誰ですか？
ここ は私jsFiddleは、この問題を実証している： JSFiddle

HTML：

<div class="cDemo"> 
<div id="toolbar"> 
<span>This first table demonstrates the problem</span> 
</div> 
<table class="table config-table" 
    data-toggle="table" 
    data-sort-name="Name" 
    data-sort-order="asc" 
    data-toolbar="#toolbar" 
    data-search="true" 
    data-search-text="" 
    data-pagination="true" 
    data-page-size="5" 
    data-page-list="[5,10,15]" 
    id="configTable"> 
<thead> 
    <tr> 
<th data-field="Enable">Enable</th> 
<th data-field="Name">Name</th> 
    </tr> 
</thead>   
    <tr> 
    <td> 
    <span class="label label-pill pull-left"> 
    <input id="toggle-trigger" 
      checked="checked" 
      data-toggle="toggle" 
      class="on-off-btn" 
      data-size="mini" 
      data-onstyle="danger" 
      data-offstyle="default" 
      type="checkbox" /> 
    </span> 
</td> 
<td>File Name</td> 
</table> 
</div> 
<div id="showResponse1"></div> 

jqueryの：

$('.on-off-btn').bootstrapToggle({ 
    on: 'On', 
    off: 'Off' 
}); 

$('.cDemo').on("change","#toggle-trigger",function(e){ 
    var link = $(e.target); 
    $('#showResponse1').html('Toggle: ' + link.prop('checked')); 
}); 

Answer 1

それはあなたがレンダリングを処理するように設計されていない使用しているプラ​​グインのように見えますネストされたプラグイン要素のソースを変更したくない場合は、ブートストラップ・テーブル・プラグインが初期化された後に、トグル・スイッチを動的に追加して初期化することができます。

トグルスイッチが必要なプレースホルダを<span class="toggle-placeholder" />に追加します。そして、それらのすべてを初期化：あなたが見ることができるように

$(function() { 
    var $checkbox = '<input type="checkbox" checked="checked "data-toggle="toggle" data-onstyle="danger" class="on-off-btn" data-size="mini" />' 
    $('.toggle-placeholder').html($checkbox); 
    $('.toggle-placeholder').find('input[type=checkbox][data-toggle=toggle]') 
          .each(function(){ 
     $(this).bootstrapToggle(); 
    }); 
}); 

を、$checkboxはあなたのマークアップで以前に持っていたはずのトグルのためのあなたのhtmlです。その後、プレースホルダの内容を$checkbox htmlに設定し、次にページの.toggle-placeholderごとにbootstrap-toggleプラグインを初期化します。

ここでは、すべてのスイッチが同じであるが、プレースホルダに設定を含めることでそれぞれのスイッ​​チをカスタマイズすることができます。ここから、新しい初期化関数は、プレースホルダ属性を読み取ることによって、これらをチェックボックスに割り当てることができます。この後

$('.class-check').bootstrapToggle(); 

：

Answer 2

ファーストは、この行を追加するには、入力に

(input class="class-check".....) 

をクラスを追加

$('#showResponse2').html('Toggle2: ' + link.prop('checked')); 

が、これはあなたが、この作品