Question

＆＃13;

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

＆＃13;

<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" >

＆＃13;

此代码片段执行两个字段的添加并将总数添加到第三个字段。好吧，这看起来不错，但问题是当我使用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

aspnet_regiis -i

$(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'));
  });
});

Answer 2

编辑：Sreekanth使用代表的答案可能是更好的方法。留在这里作为替代

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

示例实施：

＆＃13;

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();
  });
})

＆＃13;

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

＆＃13;

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'>");
}

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

3 个答案: