1

I have a table and a button that generates a new row for the table.

Qty Product name Price Subtotal
1 Product A $50 $50

Here's my jquery code for the add new row button

$("#add").click(function() {
$("#transactionData > tbody").append($('<tr>
  <td><input type="number" class="qty" id="qty" value="1" aria-label="Search" class="form-control" style="width: 100px"></td>' +
  '<td><select class="form-control custom-select" id="productList" name="productList" aria-label="Default select example">' +
      '<?php foreach ($productList as $prod) : ?>' +
      '<option value="<?= $prod['productName'] ?>"><?= $prod['productName'] ?> </option>' +
      '<?php endforeach; ?>' +
      '</select></td>
  <td class="price" id="price">20000000</td>' +
  '<td class="subTotal" id="subTotal">$64.50</td>' +
  '<td class="project-actions text-left">' +
    '<a class="btn btn-danger btn-sm" id="deleteButton"><i class="fas fa-minus"></i></a>'
    ));
});

The qty cell is an input that has jquery code that will set value of Subtotal

$('.qty').on('input', function() {
  var price = $(this).closest('tr').find('.price').text();
  var subTotal = this.value * price;
  $(this).closest('tr').find('.subTotal').html(subTotal);
});

I already use class selector and $(this).closest('tr') but it wont work on rows that i generated with the button.

ardant
  • 23
  • 6
  • 2
    Your elements are dynamically generated so you need to bind it some static element in your `DOM` i.e : `$(document).on("input",".qty",function(){ // your codes })` – Swati Jan 25 '21 at 04:06
  • Thanks @Swati for helping me. Now, the jquery works on every row – ardant Jan 25 '21 at 04:18

0 Answers0