使用 jquery 在动态添加的行中计算

Question

我正在尝试在页面中进行计算。它正在计算数量 * 价格并写入金额字段。并将金额字段的总计显示为 GRAND TOTAL。

这一切都很好。如果用户可以动态添加行，现在在底部我有一个链接。创建动态行后，它不进行计算。我是 jquery 的新手，我无法找到它有问题的原因。任何人都可以帮助我吗？

我的 HTML 在下面

<form id='cart1' name='cart' method='post' class='single' action='manual_items_poverification_save.php?tender_id=140586' ><h2 align="center">ADD PRODUCTS</h3>
<div class="clone_row">

<table style="border-collapse: collapse;" id="table" border="1" cellpadding="2" cellspacing="2" width="100%">
<thead>
    <tr bgcolor="#E6E6FA">
        <td width="5%">SlNo</td>

        <td width="25%">Prod Description</td>

        <td width="5%">Qty</td>

        <td width="5%">Units</td>

        <td width="10%">Currency</td>

        <td width="4%">Price/Unit</td>
        <td width="4%">Total</td>

        <td width="4%">Del</td>

    </tr>
</thead>
<div class="clone_row">
    <tr class="product">

        <td width="5%"><input size='1' type="text" name="slno[]" /></td>

        <td width="25%"><textarea name="item_description[]"></textarea></td>

        <td width="5%"><input size="2" class="qty" name="qty[]" type="text"></td>

            <td width="15%"><input size="15" id="item_units[]" name="item_units[]" type="text"></td>

        <td width="10%"><select class="currency-select" id="currency_change[]" name="currency_change[]">
            <option value="">Select</option>
            <option selected="selected" value="USD" data-price="1">USD</option>
            <option value="INR" data-price="67.434191">INR</option>
            <option value="GBP" data-price="0.704985">GBP</option>
            <option value="EUR" data-price="0.91118">EUR</option>
            <option value="SGD" data-price="1.386987">SGD</option>
            <option value="AUD" data-price="1.347597">AUD</option>
            <option value="CAD" data-price="1.342118">CAD</option>
            <option value="CHF" data-price="0.997145">CHF</option>
            <option value="JPY" data-price="112.6934">JPY</option>
            <option value="MYR" data-price="4.129541">MYR</option>
            <option value="ZAR" data-price="15.43258">ZAR</option>
            </select></td>

        <td width="4%"><input size="8" class="price" id='price' name="price_unit[]" type="text"></td>
        <td><input type="text" class="amount" id="amount"></td>
        <td class="delTD"><input class="delINP hidden" type="checkbox" /></td>
        GRAND TOTAL:<input type="text" class="total" id="total">

    </tr>

    </div>

</table>

</div>

<br><br>
<a href="#" id="add_more">Add More Rows</a>

<table><tr><td><input value="--Update Data--" type="submit"></td><td></td></tr></table>

</form>

我的 jquery 如下：

<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(document).ready(function(){

    update_amounts();
    $('.price').change(function() {
        update_amounts();
    });
        $('.qty').change(function() {
        update_amounts();
    });
});

function update_amounts()
{
    var sum = 0.0;
    $('.product').each(function() {
        var qty = $(this).find('.qty').val();
        var price = $(this).find('.price').val();
        var amount = (qty*price)
        //alert(amount);
        sum+= amount;
        $(this).find('.amount').val(amount); 
    });
    $('.total').val(sum);
    //just update the total to sum  

}
});

</script>
<style>
.hidden{display:none;}
.row-highlighted{background-color:red;}
</style>
<script type="text/javascript">//<![CDATA[
window.onload=function(){
$(document).on('click', '.delINP', function(){
    var rr = $(this).closest('tr');
    rr.addClass('row-highlighted');
    if (confirm('Are you sure you want to delete this row?')){
            if (rr.hasClass('newTR')) rr.remove();
    }else{
        rr.removeClass('row-highlighted');
        rr.find('td.delTD input').prop('checked',false);
    }
});

$("#add_more").on('click', function(e) {
    e.preventDefault();
    var clone = $("#table tbody tr:last").clone();
        clone.addClass('newTR');
    clone.find('td.delTD input').removeClass('hidden');
        $("#table tbody").append(clone);
});
$("#submit").on('click', function(e) {
  e.preventDefault();
  alert($("#cart1").serialize());
});
}
</script>

小提琴：https://jsfiddle.net/1qbsp3b1/

Answer 1

我会这样做：

// Execute once document is ready.
$(function () {
  // Execute when the #add button is clicked.
  $("#add").click(function () {
    // Clone the #master, remove the id from the clone and append it to body.
    $("#master").clone().removeAttr("id").appendTo("tbody");
  });
  // Attach a click event handler on table, which listens for clicks on .del.
  $("table").on("click", ".del", function () {
    // Remove the parent TR tag completely from DOM.
    $(this).closest("tr").remove();
  });
  // Attach input change event handler on table, which listens for clicks on input.
  $("table").on("input", "input", function () {
    // For every row...
    $("tbody tr").each(function () {
      // Cache the value of the current row.
      $this = $(this);
      // Do this only if this is not the master row.
      if (this.id != "master")
        // Set the value of .Amount here (making sure you set it to integer multiplying two values).
        $this.find(".Amount").val(+$this.find(".Quantity").val() * +$(this).find(".Rate").val());
      // Set the totals to 0.
      $("#total_amt, #total_qty").text(0);
      // For every .Amount, collect the values and sum it and add it to #total_amt unless it's empty.
      $(".Amount").each(function () {
        if (this.value != "")
          $("#total_amt").text(parseInt($("#total_amt").text()) + parseInt($(this).val()));
      });
      // For every .Quantity, collect the values and sum it and add it to #total_qty unless it's empty.
      $(".Quantity").each(function () {
        if (this.value != "")
          $("#total_qty").text(parseInt($("#total_qty").text()) + parseInt($(this).val()));
      });
    });
  });
});

* {font-family: 'Segoe UI';}
th {text-align: left; font-weight: 600;}
table {border-collapse: collapse; border: 1px solid #999; width: 100%;}
table td,
table th {border: 1px solid #ccc;}
table input {max-width: 100%; border: 1px solid #ccc;}
table td:first-child input {width: 50px;}
#master {display: none;}

<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<table>
  <thead>
    <tr>
      <th>Sl No</th>
      <th>Product</th>
      <th>Quantity</th>
      <th>Rate</th>
      <th>Amount</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr id="master">
      <td><input type="text" class="Sl" /></td>
      <td><input type="text" class="Product" /></td>
      <td><input type="text" class="Quantity" /></td>
      <td><input type="text" class="Rate" /></td>
      <td><input type="text" class="Amount" /></td>
      <td><input type="button" value="&times;" class="del" /></td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th colspan="2">Total</th>
      <th><span id="total_qty">0</span> Items</th>
      <th></th>
      <th><span id="total_amt">0</span> $</th>
      <th></th>
    </tr>
  </tfoot>
</table>
<input type="button" value="Add New" id="add" />

Answer 2

您需要更改 jquery "change" 事件以在 html 中添加动态添加 dom。 您需要在 jquery 中使用“on”事件，如下所示。

    $(document).ready(function () {
        update_amounts();
        $(document).on('change','.price',function(){
            update_amounts();
        });

        $(document).on('change','.qty',function(){
            update_amounts();
        }); 
    });

这肯定会帮助您解决问题。

如果您要为动态 dom 注册事件，则必须重新注册您的事件或使用“on”调用。

下面有你参考的链接

https://api.jquery.com/on/

Answer 3

迟到的答案，但您的代码仍然存在一些问题：

• 不要将 $(document).ready(fn) 处理程序包装在 $(window).load(fn)

  通过这样做，您首先等待 window 对象完全初始化，然后检查 DOM 是否已完成加载 - 任何一个都足以达到相同的目的。

• 使用event delegation with .on() handler 动态添加DOM 元素。

  通过使用事件委托，您可以强制元素的直接父级从其深处侦听 冒泡 事件。如果遇到冒泡事件，将相应地附加事件处理程序。

  引用docs:

  委托事件的优点是它们可以处理来自以后添加到文档的后代元素的事件。通过选择一个在附加委托事件处理程序时保证存在的元素，您可以使用委托事件来避免频繁附加和删除事件处理程序的需要

Forked working fiddle