使用jQuery添加新输入字段时如何计算总计

Question

 $(document).ready(function(){ $(".price2").keyup(function(){ total = parseInt($(".price1").val()) + parseInt($(".price2").val()); $(".total").val(total); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" class="price1" > <input type="text" class="price2" > <input type="text" class="total" > 

此代码段执行两个字段的加法运算，然后将总数加到第三个。 好的，这看起来不错，但问题是当我使用jQuery添加新字段时，总无法正常工作。 即使我使用jQuery添加新的输入字段，我应该怎么做才能添加总计

您可以通过以下图像更好地了解

我通过以下代码添加新字段

var i = 0;
   $("#addmore").click(function() {
     $("#inputtabletable tr:first").clone().find(".webfield").each(function() {
       $(this).val('').attr({
         'id': function(_, id) {
           return id + i
         },
         'name': function(_, name) {
           return name + i
         },
         'value': ''
       });
     }).end().appendTo("#inputtabletable");
     i++;
   });

当我使用jQuery添加新字段时如何添加总计

Answer 1

您的用例需要对html和javascript进行一些更改，否则无法立即使用。 您需要利用事件委托并从将来创建的元素中捕获事件。

有关委托的更多信息，请参见jQuery .on。

 $(document).ready(function() { $('.addition').on('keyup', '.price', function() { var total = 0 $('.addition > .price').each(function() { var currentValue = parseInt($(this).val(), 10); if (!isNaN(currentValue)) { total += currentValue; } }); $(".total").val(total); }); $('.add').click(function() { $("<input type='text' class='price'>").appendTo($('.addition')); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class='addition'> <input type="text" class="price"> <input type="text" class="price"> </div> Total: <input type="text" class="total"> <button class='add'>Add</button> 

Answer 2

编辑：Sreekanth使用委托的答案可能是一种更好的方法。 将此留在这里作为替代

您将必须动态创建共享通用类名的元素，然后使用该类来计算总和。 每次创建新元素时，您可能还必须注册/取消注册事件，以防止注册多个处理程序。

示例实施：

 function createItem() { var $item = $('<div><input type="text" value="" class="item"/></div>'); return $item; } function registerListeners() { $('.item').off('keyup',calculateTotal); $('.item').on('keyup',calculateTotal); } function calculateTotal() { var total = 0; $('.item').each(function() { var value = $(this).val(); total += isNaN(value) ? 0 : (+value); }); $('#total').html(total); } $(function() { var $container = $('#container'); $('#new').click(function() { var $newItem = createItem(); $container.append($newItem); registerListeners(); }); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="container"> </div> <div> <div>Total: <span id="total"></span></div> <button id="new">Add new item</button> </div> 

Answer 3

// HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="add-new-field">Add New Field</button>
<div class="container">
<input type="text" class="price" value="0">
<input type="text" class="price" value="0" >

</div>
<input type="text" class="total" >

// Javascript

$(document).ready(function(){

 $("#add-new-field").on('click',AddNewField);  $("body").on('keyup','.price',function(){
     calculateTotal();
   });

});

function calculateTotal()
{
  var total=0;
  $(".price").each(function(i,v){
    if($(v).val()!="")
    total+=parseFloat($(v).val());
  })
  $(".total").val(total);
}

function AddNewField()
{
  $(".container").append("<input class='price' value='0'>");
}