使用jquery删除输入后，无法重新计算动态添加的输入的总和？

Question

我有一个表格，我能够计算所有动态添加的输入的总数，但是我要在删除行之后重新计算，这是我的代码。

我遵循了代码

http://jsfiddle.net/Uwbe6/2/

calcSum();

function calcSum() {
  var myForm = $('#myForm');
  myForm.delegate('.items', 'change', function() {
    var sum = 0;
    var itemsValue = myForm.find('.items');
    itemsValue.each(function() {
      var value = Number($(this).val());
      if (!isNaN(value)) sum += value;
      // sum += parseInt($(this).val());
    });
    // return sum;
    $('.total-amt').html(sum);
    // console.log(sum);
  });
}

$('body').on("click", ".delete", function(e) {
  $(this).parent().remove();
  calcSum();
});

$(function() {
  var i = 1;
  $('#add_more').click(function(event) {
    event.preventDefault();
    $('input.items').last().attr('name', 'item[' + i + ']');
    $('#cart_items').append($('#tmp_cart').html());
    i++;
  });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="POST" id="myForm">
  Total Items<input type="text" value="100" name="total_amt" id="total_amt">
  <div id="cart_items">
    Items<input type="text" name="item[0]" class="items"><br/>
  </div>
  <button type="button" id="add_more">Add More</button>
  <input type="submit" name="submit" value="submit">
</form>
<p>Total Amt:<span class="total-amt"></span></p>
<div id="tmp_cart" style="display: none;">
  <div class="cart_items">
    <label>
      Items
      <input type="text" name="item[]" class="items">
    </label>
    <input type="button" value="Delete" class="delete"><br/>
  </div>
</div>

感谢您的建议。

Answer 1

calcSum()应该只是计算总和，而不是绑定处理程序。然后，您可以从其他处理程序中调用它。

calcSum();

function calcSum() {
  var myForm = $('#myForm');
  var sum = 0;
  var itemsValue = myForm.find('.items');
  itemsValue.each(function() {
    var value = Number($(this).val());
    if (!isNaN(value)) sum += value;
    // sum += parseInt($(this).val());
  });
  // return sum;
  $('.total-amt').html(sum);
  // console.log(sum);
}

$("#myForm").on("change", ".items", calcSum);

$('body').on("click", ".delete", function(e) {
  $(this).parent().remove();
  calcSum();
});

$(function() {
  var i = 1;
  $('#add_more').click(function(event) {
    event.preventDefault();
    $('input.items').last().attr('name', 'item[' + i + ']');
    $('#cart_items').append($('#tmp_cart').html());
    i++;
  });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="POST" id="myForm">
  Total Items<input type="text" value="100" name="total_amt" id="total_amt">
  <div id="cart_items">
    Items<input type="text" name="item[0]" class="items"><br/>
  </div>
  <button type="button" id="add_more">Add More</button>
  <input type="submit" name="submit" value="submit">
</form>
<p>Total Amt:<span class="total-amt"></span></p>
<div id="tmp_cart" style="display: none;">
  <div class="cart_items">
    <label>
      Items
      <input type="text" name="item[]" class="items">
    </label>
    <input type="button" value="Delete" class="delete"><br/>
  </div>
</div>

Answer 2

使用.on（）代替5bb..26d，因为它已被弃用。另外，您可以简单地将事件绑定与calcSum函数分开。

.delegate()

var myForm = $('#myForm');
calcSum();

function calcSum() {
    var sum = 0;
    var itemsValue = myForm.find('.items');
    itemsValue.each(function() {
      var value = Number($(this).val());
      if (!isNaN(value)) sum += value;
      // sum += parseInt($(this).val());
    });
    // return sum;
    $('.total-amt').html(sum);
    // console.log(sum);
}

myForm.on('change', calcSum);

$('body').on("click", '.delete', function(e) {
  $(this).parent().remove();
  calcSum();
});

$(function() {
  var i = 1;
  $('#add_more').click(function(event) {
    event.preventDefault();
    $('input.items').last().attr('name', 'item[' + i + ']');
    $('#cart_items').append($('#tmp_cart').html());
    i++;
  });
})