Question

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

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

我的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>

FIDDLE：https://jsfiddle.net/1qbsp3b1/

Answer 1

您需要更改jquery＆＃34;更改＆＃34;在html中添加动态添加dom的事件。你需要使用＆＃34; on＆＃34; jquery中的事件，如下所示。

    $(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 2

我会做这样的事情：

$(function () {
  $("#add").click(function () {
    $("#master").clone().removeAttr("id").appendTo("tbody");
  });
  $("table").on("click", ".del", function () {
    $(this).closest("tr").remove();
  });
  $("table").on("input", "input", function () {
    $("tbody tr").each(function () {
      $this = $(this);
      if (this.id != "master")
        $this.find(".Amount").val(+$this.find(".Quantity").val() * +$(this).find(".Rate").val());
      $("#total_amt, #total_qty").text(0);
      $(".Amount").each(function () {
        if (this.value != "")
          $("#total_amt").text(parseInt($("#total_amt").text()) + parseInt($(this).val()));
      });
      $(".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 3

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

不要将$(document).ready(fn)处理程序包裹在$(window).load(fn)
中
通过这样做，您首先等待window对象完全初始化，然后您正在检查DOM是否已完成加载 - 任何一个对于相同的目的都是足够的。
使用event delegation with .on() handler动态添加DOM元素。

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

引用docs：

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

Forked working fiddle

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

3 个答案: