用jquery计算动态添加输入字段的总和

Question

我有一个表格，用于计算金额的总和。使用 jquery clone() 动态生成行；

此代码正在计算渲染行的总和，而不是新创建的行

 $(document).ready(function(){

        $('.datepicker').datepicker();

        var $inst = $('.inst_amount');
            $inst_form = $('.inst_form');
            $total_amount = $('#total_amount');
            $total_price = $('#total_price');
            total = 0;

        $.each($inst, function(index, val) {
            var val = ($(this).val() == "") ? 0 : $(this).val();
            total = total + parseFloat(val);
        });
         $total_price.html(Math.round(total));
         $total_amount.val(Math.round(total));


        $(document).on('blur','.inst_amount', function(){
            var total = 0;
            $.each($inst, function(index, val) {
                var val = ($(this).val() == "") ? 0 : $(this).val();
                total = total + parseFloat(val);
            });
            console.log(total);
            $total_price.html(Math.round(total));
            $total_amount.val(Math.round(total));
        }); 
});

Answer 1

1. 将var $inst = $('.inst_amount'); 移动到您使用它的位置：
   var total = 0,$inst = $('.inst_amount'); - 实际上甚至不要。查看我的代码

2. 使用逗号分隔变量

3. 干燥 - 不要重复自己

4. 正确给出类并将字段添加到容器中。

function sumIt() {
  var total = 0, val;
  $('.inst_amount').each(function() {
    val = $(this).val();
    val = isNaN(val) || $.trim(val) === "" ? 0 : parseFloat(val);
    total += val;
  });
  $('#total_price').html(Math.round(total));
  $('#total_amount').val(Math.round(total));
}

$(function() {

  // $('.datepicker').datepicker(); // not needed for this test


  $("#add").on("click", function() {
    $("#container input").last()
      .before($("<input />").prop("class","inst_amount").val(0))
      .before("<br/>");
    sumIt();  
  });


  $(document).on('input', '.inst_amount', sumIt);
  sumIt() // run when loading
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="add" value="add" /><br/>
<form id="inst_form">
<div id="container">
  <input type="text" class="inst_amount" value="4" /><br/>
  <input type="text" class="inst_amount" value="" /><br/>
  <input type="text" id="total_amount" value="0" />
</form>
</div>
<span id="total_price"></span>

Answer 2

此代码将仅计算页面加载时可用的所有行的总数。添加新行时，您需要调用相同的代码再次计算总计。基本上点击添加行需要重新计算。

Answer 3

将这些代码放在 $(document).ready 之外

$(document).on('blur','.inst_amount', function(){
        var total = 0;
        $.each($inst, function(index, val) {
            var val = ($(this).val() == "") ? 0 : $(this).val();
            total = total + parseFloat(val);
        });
        console.log(total);
        $total_price.html(Math.round(total));
        $total_amount.val(Math.round(total));
    });

因为在 $(document).ready 时，不会添加新行