tyy007 tyy007 - 25 days ago 7
jQuery Question

jquery doesn't work on dynamically added table rows

so i have a table wherein the user will input something and in the last column, it will be populated automatically based on the input of the other columns. It's working well enough but once i add another row to the table, it doesn't fill the last column like the original row does.

So my question is what's wrong and how can i fix this?

Thanks!

script for adding rows:

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


});

script for populating the last column:

$('#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);


});


fiddle: https://jsfiddle.net/qhk3ha75/3/

Answer

What you really need is to utilize classes throughout your code and to use event delegation to listen for events on dynamic elements.

Here is an example solution:

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>