jquery not active for all table lines

Question

I have the following function:

$('input.qty').change(function(){
    var $tr = $(this).closest('tr');
    // var price = $(this).closest('tr').find('input.price').val();
    var price = parseFloat($tr.find('td').eq(2).text());
    var qty = parseInt($(this).val());
    $(this).closest('tr').find('input.amt').val(qty * price);
    console.log($tr);
    console.log(price);
    console.log(qty);
});

I'm still green when it comes to jquery so I may be giving the browser bad instructions.

WHAT I THINK THE FUNCTION SHOULD DO: The function applies to the table in the below snippet and should simply update the amount column with the product of the quantity and price cells for the row that I update a quantity in. Trouble is that it only applies to the first line in the table no matter what I try. To date I have tried moving the script to the head of the page (it live in the footer); swapping out the price variable declaration (with the commented code) and spending many an hour scouring google, w3, and this site.

I can almost see what's wrong. I load the script when the page loads and it applies to the table as it is, but when I add a row, the script doesn't reload (why would it?). I feel like I need to include some kind of trigger on the quantity line, but I can't fathom what it'd be. I could also be way off.

$('input.qty').change(function() {
  var $tr = $(this).closest('tr');
  var price = $(this).closest('tr').find('input.price').val();
  // var price = parseFloat($tr.find('td').eq(1).text());
  var qty = parseInt($(this).val());
  $(this).closest('tr').find('input.amt').val(qty * price);
});

.tis {
  border: none;
  background-color: Transparent;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!doctype html>


<html lang="en">

  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Font Awesome CDN -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

    <!-- Bootstrap CSS/CDN -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

   
  

  </head>

  <body>

    <main role="main">

      <script type="text/javascript">
      
      function addRow() {
 var table = document.getElementById("invoiceTableBody")
 var newRow = 
 '<tr>' +
   '<td>'+
     '<div>'+
       '<select class="try" name="this">'+

       '<option value="Option1">Option 1</option>'+
       '<option value="Option2">Option 2</option>'+
       '<option value="Option3">Option 3</option>'+

       '</select>'+
     '</div>'+
   '</td>'+
   '<td><input type="text" name="l108Price[]" size= "3" class="price tis"></td>' +
   '<td><input type="text" name="l108Qty[]" size= "1" class="qty tis"></td>' +
   '<td><input type= "text" name="l108Amt[]" size= "3" class="amt tis" disabled></td>' +
   '<td><div><button type="button" name="button" onclick="addRow()" style="background-color:Transparent; border:none; color:green;"><i class="fas fa-plus-circle"></i></button></div></td>'+
 '</tr>';
 
   // Inserting the new row as an HTMLElement at the end of the table element
 table.insertAdjacentHTML('beforeend', newRow);

};

</script>

      <div class="row">
        <div class="col-md-8 offset-2">

          <table class="table thead-dark table-hover border-bottom" id="invoiceTable">

            <thead>
              <tr>
                <th style="width: 60%">Item - Description</th>
                <th style="width: 10%">Price</th>
                <th style="width: 5%">Qty</th>
                <th style="width: 10%">Amount</th>
                <th style=>Action</th>
              </tr>
            </thead>

            <tbody id="invoiceTableBody">
              <tr id="invoiceTableRow">

                <td>
                  <div>
                    <select class="try" name="this">
                      <option value="<Option1">Option 1</option>
                      <option value="<Option2">Option 2</option>
                      <option value="<Option3">Option 3</option>
                    </select>
                  </div>
                </td>

                <td><input type="text" name="l108Price[]" size="3" class="price tis"></td>
                <td><input type="text" name="l108Qty[]" size="1" class="qty tis"></td>
                <td><input type='text' name='l108Amt[]' size='3' class="amt tis" disabled></td>
                <td>
                  <div><button type="button" name="button" onclick="addRow()" style="background-color:Transparent; border:none; color:green;"><i class="fas fa-plus-circle"></i></button></div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>


    </main><!-- /role main -->


  </body>

</html>

You're on the right track with intuitively knowing that "applies to the table as it is" - when you add a new element, existing events aren't applied. You can either add those events at the time you create the new row or you can use event delegation (and not worry about) - in your case, change `$('input.qty').change(...` to `$(document).on("change", "input.qty", ...` — freedomn-m, Apr 14 '20 at 16:28
This worked and needs to be the answer. Looking at the script, it seems like it'd work better if it didn't require an actual change. I wonder if there's a way to capture the "leaving a field" event. — Justin Egan, Apr 14 '20 at 16:49
It's a common question on here, but finding it isn't so easy, especially if you're not sure of the exact terms "event binding" and "dynamically created elements". — freedomn-m, Apr 14 '20 at 17:12

jquery not active for all table lines

0 Answers0