时间戳

首页 > 解决方案 > jQuery 代码不适用于动态附加的元素

html - jQuery 代码不适用于动态附加的元素

问题描述

我的 jquery 代码不适用于动态附加的元素。它对于已经存在的元素工作正常，但是当我使用 jQuery 附加函数嵌入新行时，jquery 代码不再起作用。

这是嵌入新行的jquery代码

      <script>
      $(document).ready(function() {
         $('#add_row').click(function(){
             $('#sale_table').append('<tr><td><select class="form-control" name="item_name[]"><option>Select an Item</option><?php while($item_result = mysqli_fetch_assoc($select_item_query)) { ?><option><?php echo $item_result['item_name']; ?></option><?php } ?></select></td><td><input type="text" class="form-control" name="item_quantity[]"  id="sale_item_quantity" placeholder="0.00"></td><td><input type="text" class="form-control" name="item_price[]" id="sale_item_price" placeholder="0.00"></td><td><input type="text" class="form-control" name="item_discount[]" id="sale_item_discount" placeholder="%"></td><td><input type="text" class="form-control" name="item_total_amount[]" id="sale_item_total_amount" placeholder="0.00"></td></tr>');
         });
       });
      </script>

这是我试图在附加行上运行的 jquery 代码。此代码不适用于附加的行

      <script>
      $(document).ready(function() {
      $('#sale_item_price, #sale_item_quantity').on('keyup', function(){
      var sum = 0;
      $('.sale-entry > tbody > tr').each(function() {
      var qty = $(this).find('#sale_item_quantity').val();
      var price = $(this).find('#sale_item_price').val();
      var discount = $(this).find('#sale_item_discount').val();
      var amount = (qty * price);
          
      if(discount){
          amount = amount - discount;
      }
          
      $(this).find('#sale_item_total_amount').val(amount);
      sum += amount;
      });
        

      $('#sale_subtotal_amount').text(sum);
      $('#sale_total_amount').text(sum);
          
      $("#sale_item_discount").on('keyup', function() {
      var discount = $("#sale_item_discount").val();
      $("#sale_item_total_amount").val(sum - discount);
      $("#sale_subtotal_amount").text(sum - discount);
      $("#sale_total_amount").text(sum - discount);
          
      });
          
});
      });             
      </script>

这是HTML代码

      <table class="table sale-entry" id="sale_table">
      <thead class="thead-light">
      <tr>
      <th scope="col">Item Name</th>
      <th scope="col">Quantity</th>
      <th scope="col">Rate</th>
      <th scope="col">Discount</th>
      <th scope="col">Total Amount</th>
      </tr>
      </thead>
      <tbody>
      <tr>
      <td><select class="form-control" name="item_name[]">
      <option>Select an Item</option>
      <?php while($item_result = mysqli_fetch_assoc($select_item_query)) { ?>
      <option><?php echo $item_result['item_name']; ?></option>
      <?php } ?>
      </select>
      </td>
      <td><input type="text" class="form-control" name="item_quantity[]"  id="sale_item_quantity" placeholder="0.00"></td>
      <td><input type="text" class="form-control" name="item_price[]" id="sale_item_price" placeholder="0.00"></td>
      <td><input type="text" class="form-control" name="item_discount[]" id="sale_item_discount" placeholder="%"></td>
      <td><input type="text" class="form-control" name="item_total_amount[]" id="sale_item_total_amount" placeholder="0.00"></td>
      </tr>
      </tbody>
      </table>

可能是什么问题？

标签： htmljquery

解决方案

如果$('#sale_item_price, #sale_item_quantity').on('keyup'...不工作，那么$(document).on('keyup', '#sale_item_price, #sale_item_quantity',...工作。

在这里，$('#sale_item_price, #sale_item_quantity')不知道 DOM 发生了变化。

看看例子： -

$(document).ready(function() {
  $(document).on('keyup', '#sale_item_price, #sale_item_quantity, #sale_item_discount', function() {
    var sum = 0;
    $('.sale-entry > tbody > tr').each(function() {
      var qty = $(this).find('#sale_item_quantity').val();
      var price = $(this).find('#sale_item_price').val();
      var discount = $(this).find('#sale_item_discount').val();
      var amount = (qty * price);

      if (discount) {
        amount = amount - discount;
      }

      $(this).find('#sale_item_total_amount').val(amount);
      sum += amount;
    });


    $('#sale_subtotal_amount').text(sum);
    $('#sale_total_amount').text(sum);
  });
});

$(document).ready(function() {
  $('#add_row').click(function() {
    $('#sale_table').append('<tr><td><select class="form-control" name="item_name[]"><option>Select an Item</option></select></td><td><input type="text" class="form-control" name="item_quantity[]"  id="sale_item_quantity" placeholder="0.00"></td><td><input type="text" class="form-control" name="item_price[]" id="sale_item_price" placeholder="0.00"></td><td><input type="text" class="form-control" name="item_discount[]" id="sale_item_discount" placeholder="%"></td><td><input type="text" class="form-control" name="item_total_amount[]" id="sale_item_total_amount" placeholder="0.00"></td></tr>');
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table sale-entry" id="sale_table">
  <thead class="thead-light">
    <tr>
      <th scope="col">Item Name</th>
      <th scope="col">Quantity</th>
      <th scope="col">Rate</th>
      <th scope="col">Discount</th>
      <th scope="col">Total Amount</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <select class="form-control" name="item_name[]">
          <option>Select an Item</option>
        </select>
      </td>
      <td><input type="text" class="form-control" name="item_quantity[]" id="sale_item_quantity" placeholder="0.00"></td>
      <td><input type="text" class="form-control" name="item_price[]" id="sale_item_price" placeholder="0.00"></td>
      <td><input type="text" class="form-control" name="item_discount[]" id="sale_item_discount" placeholder="%"></td>
      <td><input type="text" class="form-control" name="item_total_amount[]" id="sale_item_total_amount" placeholder="0.00"></td>
    </tr>
  </tbody>
</table>
<button id="add_row" type="button">Add row</button>
<div>sale_subtotal_amount: <span id="sale_subtotal_amount"></span></div>
<div>sale_total_amount: <span id="sale_total_amount"></span></div>

推荐阅读