jquery不能在动态添加的表格行上工作

Question

所以我有一个表格，其中用户将输入一些内容并在最后一列中，它将根据其他列的输入自动填充。它工作得很好，但是一旦我在表中添加另一行，它不会像原始行那样填充最后一列。

所以我的问题是什么是错的，我该如何解决这个问题？

谢谢！

添加行脚本：

$('.add_row_count').on('click',function(){ 
event.preventDefault(); 
var newRow = $('<tr><td style = "text-align: center;"><input type="text" name="categ_name[]" id="categ_name" value="" placeholder="Item Category" required></td> ' + 
'<td style = "text-align: center;"><input type="number" name="beg_count[]" id="beg_count" value="" placeholder="BEG Count" required></td>' + 
'<td style = "text-align: center;"><input type="number" name="del_count[]" id="del_count" value="" placeholder="DEL Count" required></td>' + 
'<td style = "text-align: center;"><input type="number" name="ret_count[]" id="ret_count" value="" placeholder="RET Count" required></td>' + 
'<td style = "text-align: center;"><input type="number" name="exc_count[]" id="exc_count" value="" placeholder="EXC Count" required></td>' + 
'<td style = "text-align: center;"><input type="number" name="pout_count[]" id="pout_count" value="" placeholder="P-Out Count" required></td>' + 
'<td style = "text-align: center;"><input type="number" name="sales_count[]" id="sales_count" value="" placeholder="SALES Count" required></td>' + 
'<td style = "text-align: center;"><input type="number" name="end_count[]" id="end_count" value="" placeholder="END Count" required></td>' + 
'<td style = "text-align: center;"><input type="number" name="actual_count[]" id="actual_count" value="" placeholder="Actual Count" required></td>' + 
'<td style = "text-align: center;"><input type="number" name="variance[]" id="variance" value="" placeholder="Variance" readonly></td>' + 
'<td style="border-top: 1px solid white; border-bottom: 1px solid white; border-right: 1px solid white"><button class="del" id="delete_row_count" type="button" onclick="deleterow_count();">Delete row</button></td></tr>'); 
$('table.count').append(newRow); 
}); 

脚本用于填充最后一栏

 $('#categ_name,#beg_count, #del_count, #ret_count,#exc_count, #pout_count, #sales_count,#end_count, #actual_count, #variance').keyup(function(){ 

    var end = $('#end_count').val(); 
    var ac = $('#actual_count').val(); 

    var total_variance = end - ac; 


    $('#variance').val(total_variance);  
    }); 

小提琴：https://jsfiddle.net/qhk3ha75/3/

Answer 1

你真正需要的是利用classes整个代码和使用event delegation来收听dynamic elements上的活动。

下面是一个例子的解决方案：

jsFiddle

var $tbody = $('#count tbody'); 
 
$('.add_row_count').on('click', function() { 
 
    event.preventDefault(); 
 
    var $row = $tbody.find('tr').eq(0).clone(); 
 
    $row.find('input').val(''); 
 
    var $newRow = $($row[0].outerHTML); 
 
    $tbody.append($newRow); 
 
}); 
 
$tbody.on('keyup', '.calculate', function() { 
 
    var $tr = $(this).closest('tr'); 
 
    var end = $tr.find('.end_count').val(); 
 
    var ac = $tr.find('.actual_count').val(); 
 
    var total_variance = end - ac; 
 
    $tr.find('.variance').val(total_variance); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="" value="" class="add_row_count" id="hide">Add another row</a> 
 
<table id='count' class="table table-bordered count" cellspacing="0" width="100%"> 
 
    <thead> 
 
    <tr> 
 
     <th style="text-align: center; width:180px"></th> 
 
     <th style="text-align: center;">BEG</th> 
 
     <th style="text-align: center;"> DEL</th> 
 
     <th style="text-align: center;"> RET</th> 
 
     <th style="text-align: center;"> EXC</th> 
 
     <th style="text-align: center;"> P-OUT</th> 
 
     <th style="text-align: center;"> SALES</th> 
 
     <th style="text-align: center;"> END</th> 
 
     <th style="text-align: center;"> ACTUAL COUNT</th> 
 
     <th style="text-align: center;"> VARIANCE</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td style="text-align: center;"> 
 
     <input type="text" name="categ_name[]" class="calculate categ_name" value="" placeholder="Item Category" required> 
 
     </td> 
 
     <td style="text-align: center;"> 
 
     <input type="number" name="beg_count[]" class="calculate beg_count" value="" placeholder="BEG Count" required> 
 
     </td> 
 
     <td style="text-align: center;"> 
 
     <input type="number" name="del_count[]" class="calculate del_count" value="" placeholder="DEL Count" required> 
 
     </td> 
 
     <td style="text-align: center;"> 
 
     <input type="number" name="ret_count[]" class="calculate ret_count" value="" placeholder="RET Count" required> 
 
     </td> 
 
     <td style="text-align: center;"> 
 
     <input type="number" name="exc_count[]" class="calculate exc_count" value="" placeholder="EXC Count" required> 
 
     </td> 
 
     <td style="text-align: center;"> 
 
     <input type="number" name="pout_count[]" class="calculate pout_count" value="" placeholder="P-Out Count" required> 
 
     </td> 
 
     <td style="text-align: center;"> 
 
     <input type="number" name="sales_count[]" class="calculate sales_count" value="" placeholder="SALES Count" required> 
 
     </td> 
 
     <td style="text-align: center;"> 
 
     <input type="number" name="end_count[]" class="calculate end_count" value="" placeholder="END Count" required> 
 
     </td> 
 
     <td style="text-align: center;"> 
 
     <input type="number" name="actual_count[]" class="calculate actual_count" value="" placeholder="Actual Count" required> 
 
     </td> 
 
     <td style="text-align: center;"> 
 
     <input type="number" name="variance[]" class="variance" value="" placeholder="Variance" readonly> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>