jquery doesn't work on dynamically added table rows

Question

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/

One reason may have something to do with the fact you have to have unique id names. You can not add rows that have the same values for ids. — Rasclatt, Nov 15 '16 at 06:33
Possible duplicate of [Event binding on dynamically created elements?](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — Wesley Smith, Nov 15 '16 at 06:35
Dupe question but in short, use `$('table').on('click', '.add_row_count', function(){....` ( that is in addition to changing your ids to classes) — Wesley Smith, Nov 15 '16 at 06:36
@DelightedD0D i tried using that one but my page just refreshes and when i tried it on jsfiddle, it gave me this message: {"error": "Please use POST request"} — tyy007, Nov 15 '16 at 06:46

score 0 · Accepted Answer · edited May 23 '17 at 12:01

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>

Thank you! This is exactly what i was looking for! Will look into event delegation. Thanks again! — tyy007, Nov 15 '16 at 07:15
@tyy007 Youre quite welcome. Note that rather than building the html, Ive cloned the first element, cleared the inputs, and used the html from it to make the new row. IMHO, it's much easier to work with, especially with complex html. Happy coding :) — Wesley Smith, Nov 15 '16 at 07:18
i have a question though, how should i add a delete row link as a td if the tr has been cloned and the original row doesn't have a delete row link column? — tyy007, Nov 15 '16 at 07:35
@vikaspandey could you be more specific, both the snippet here and the jsFiddle work fine — Wesley Smith, Nov 15 '16 at 13:32

jquery doesn't work on dynamically added table rows

1 Answers1