テーブルのチェックボックスをクリックして動的データの操作を実行する方法

Question

私はブートストラップテーブルを使用しています。そこで、Item ID値を取得するためにテーブルのチェックボックスをクリックすると、アクションを実行します。

<table data-toggle="table" id="table-style" data-row-style="rowStyle" data-url="data/g3.json" data-show-refresh="true" data-show-toggle="true" data-show-columns="true" data-search="true" data-select-item-name="toolbar1" data-pagination="true" data-sort-name="name" data-sort-order="desc" data-single-select="false" data-click-to-select="true" data-maintain-selected="true"> 
    <thead> 
    <tr> 
     <th data-field="state" data-checkbox="true"></th> 
     <th data-field="id" >Item ID</th> 
     <th data-field="name" data-sortable="true">Product Name</th> 
     <th data-field="price" data-sortable="true">Actual Price</th> 
     <th data-field="discount_price" data-sortable="true">Discount Price</th> 
     <th data-field="stock_avail" data-sortable="true">Stock Available</th> 
    </tr> 
    </thead> 
</table> 

jQueryの関数は：私は私の機能を呼び出していませんでしたチェックボックスをクリックすると、これを解決するために

$("input[name='btSelectItem']").on("click","input[name='btSelectItem']",function(){ 
     alert("Hello"); 
     var values = ""; 
     $.each($("input[name='btSelectItem']:checked"), function(index, value) { 
      var data = $(this).parents('tr:eq(0)'); 
      if(index > 0) 
       values ++; 
      values +=$(data).find('td:eq(1)').text(); 
     }); 
     alert(values); 
    }); 

、親切に私を助けて。以下は、事前のおかげで

私のテーブルのコードです：

<table id="eventsTable" class="table table-striped table-hover" data-id-field="id" data-toolbar="#toolbar" data-show-columns="true" data-show-toggle="true" data-show-refresh="true" data-search="true" data-url="data/g3.json" data-height="300" data-toggle="table" style="margin-top: -41px;"> 
<thead> 
<tbody> 
<tr class="selected" data-index="0"> 
<td class="bs-checkbox"> 
<input type="checkbox" name="btSelectItem" data-index="0"> 
</td> 
<td style="">Test</td> 
<td style="">21</td> 
<td style="">High</td> 
<td style="">Low</td> 
<td style="">High</td> 
<td style="">100</td> 
</tr> 
<tr data-index="1"> 
<td class="bs-checkbox"> 
<input type="checkbox" name="btSelectItem" data-index="1"> 
</td> 
<td style="">Test2</td> 
<td style="">26</td> 
<td style="">High</td> 
<td style="">Low</td> 
<td style="">Medium</td> 
<td style="">50</td> 
</tr> 
<tr data-index="2"> 
<tr data-index="3"> 
<tr data-index="4"> 
<tr data-index="5"> 
<tr data-index="6"> 
<tr data-index="7"> 
</tbody> 
</table> 

Answer 1

、問題は、ブートストラップテーブルjsのコードを使用すると、クリックしたときにイベントをキャプチャし、その伝播を停止し、それがバブルアップ決して、あなたが文書に取り込むことができないということですレベル。

良いニュースは、このようなイベントをキャプチャするAPIを提供することです。 、例えば：

$('#table-style').on("check.bs.table", myFunc); 

Answer 2

すでに入力要素にイベントハンドラをアタッチしているので、あなたがon内の任意の別のフィルタを必要としません。 で試してみてください：セレクタが間違っていたほか

$(document).on("click", "input[name='btSelectItem']", function(){ ... })