借助js的on方法，可以給動態生成的input標簽，添加change事件
1 //我的費率
2 $(document).on("input propertychange", "#mytbody .my_rate", function (e) { 3 var my_rate = $(this).val(); 4 var obj = $(this).parent().parent(); 5 var child_rate = $(obj.find('.child_rate')[0]).val(); 6 $(obj.find('.left_rate')[0]).val(parseFloat(my_rate)-parseFloat(child_rate)); 7 });
這是動態生成的html結構
1 <table id="table" class="table table-striped table-bordered table-hover table-nowrap" width="100%">
2 <thead>
3 <tr>
4 <th style="text-align: center; vertical-align: middle;" width="3%"><div class="th-inner">ID</div><div class="fht-cell"></div></th>
5 <th style="text-align: center; vertical-align: middle;" width="10%"><div class="th-inner ">產品名稱</div><div class="fht-cell"></div></th>
6 <th style="text-align: center; vertical-align: middle;" width="5%"><div class="th-inner ">產品分類</div><div class="fht-cell"></div></th>
7 <th style="text-align: center; vertical-align: middle;" width="5%"><div class="th-inner ">保費</div><div class="fht-cell"></div></th>
8 <th style="text-align: center; vertical-align: middle;" width="3%"><div class="th-inner ">總服務費率</div><div class="fht-cell"></div></th>
9 <th style="text-align: center; vertical-align: middle;" width="3%"><div class="th-inner ">下級分銷服務費率</div><div class="fht-cell"></div></th>
10 <th style="text-align: center; vertical-align: middle;" width="3%"><div class="th-inner ">剩余自留費率</div><div class="fht-cell"></div></th>
11 <th style="text-align: center; vertical-align: middle;" width="3%"><div class="th-inner ">操作</div><div class="fht-cell"></div></th>
12 </tr>
13 </thead>
14 <tbody id="mytbody">
15 <tr id="0-id">
16 <td style="text-align: center; vertical-align: middle;" id="22-myid" data-value="22">22</td>
17 <td style="text-align: center; vertical-align: middle;" id="22-myname" data-value="京彩一生百萬醫療">京彩一生百萬醫療</td>
18 <td style="text-align: center; vertical-align: middle;" id="22-jq_category_name" data-value="意外險">意外險</td>
19 <td style="text-align: center; vertical-align: middle;" id="22-premium" data-value="0.00">0.00</td>
20 <td style="text-align: center; vertical-align: middle;"><input class="form-control my_rate" type="number" id="22-my_rate" value="15"></td>
21 <td style="text-align: center; vertical-align: middle;"><input class="form-control child_rate" type="number" id="22-child_rate" value="8"></td>
22 <td style="text-align: center; vertical-align: middle;"><input class="form-control left_rate" type="number" id="22-left_rate" value="5"></td>
23 <td style="text-align: center; vertical-align: middle;" class="mydel" data-id="0">刪除</td>
24 </tr>
25 <tr id="1-id">
26 <td style="text-align: center; vertical-align: middle;" id="27-myid" data-value="27">27</td>
27 <td style="text-align: center; vertical-align: middle;" id="27-myname" data-value="平安一生">平安一生</td>
28 <td style="text-align: center; vertical-align: middle;" id="27-jq_category_name" data-value="健康險">健康險</td>
29 <td style="text-align: center; vertical-align: middle;" id="27-premium" data-value="100000.00">100000.00</td>
30 <td style="text-align: center; vertical-align: middle;"><input class="form-control my_rate" type="number" id="27-my_rate" value="20"></td>
31 <td style="text-align: center; vertical-align: middle;"><input class="form-control child_rate" type="number" id="27-child_rate" value="5"></td>
32 <td style="text-align: center; vertical-align: middle;"><input class="form-control left_rate" type="number" id="27-left_rate" value="5"></td>
33 <td style="text-align: center; vertical-align: middle;" class="mydel" data-id="1">刪除</td>
34 </tr>
35 </tbody>
36 </table>
使用bind方法不行，具體，on和bind和區別自行百度吧，我也不明白