jQuery不适用于动态添加的表行

debugcn 发表于 Dev

tyy007

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

所以我的问题是出什么问题了，我该如何解决？

谢谢！

用于添加行的脚本：

$('.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/

韦斯利·史密斯

您真正需要的是在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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。