动态添加的输入文本中的 JQuery 加法/减法答案

【问题标题】：JQuery Addition/subtraction from dynamically added input text动态添加的输入文本中的 JQuery 加法/减法
【发布时间】：2014-11-21 10:20:47
【问题描述】：

我有这种情况：我在表单中有文本输入并使用它们进行一些计算（基本上是加法和减法）。文本输入（小计）可以通过带有 onclick 的 jQuery 添加/删除。到目前为止，当我将输入元素添加到表单并将一些值放入其中时，我已经能够获得输入元素的总和（总数）。我现在缺少的是每当我删除一个文本输入时更新总和的方法。这是代码，我还有一个JSFIDDLE HERE: http://jsfiddle.net/uomopalese/1w54rhyv/。感谢您的帮助。

代码：（更新为@iovis提出的解决方案

<div id="dati-dettaglio-linee">
  <div id="righe">
    <div class="linea"><!-- ripetizione linea -->
    <h5>Nr. linea: <span>1</span></h5>
    <ul>
     <li>Sub total: <span><input class="somma" type="text" value="" name="ValoreTotale" /></span></li>
    </ul>
  </div><!-- ripetizione linea -->
</div><!-- righe -->
<div class="link-button"><a href="javascript:;" id="addButton">ADD LINE</a></div>
<div class="link-button"><a href="javascript:;" id="removeButton">REMOVE LINE</a></div>
<div class="clear"></div>
<div id="riepilogo-aliquote-nature">
  <ul>
    <li>Total: <span class="totale"><input type="text" value="" id="ImponibileImporto" /></span></li>
  </ul>
</div>
</div><!-- dettaglio-linee -->


/////////////////////////////////// ADD LINES 
$(document).ready(function(){ 
  var counter = 2;
    $("#addButton").click(function () {
    //alert('Stai per aggiungere una linea di contenuto alla fattura');
    $("#righe").append('<div id="linea' + counter + '"><h5>Nr. linea: <span>' + counter + '</span></h5>' + '\n\r' +
      '<ul>' +'\n\r' +  
      '<li>Sub total: <span><input class="somma" type="text" value="" id="ValoreTotale' + counter + '" /></span></li>' + '\n\r' + 
      '</ul></div>');
counter++;;
$(".somma").each(function() {
        $(this).keyup(function(){
            calculateSum();
        });
    });
  });
  $("#removeButton").click(function () {
 //alert('Stai per rimuovere una linea di contenuto alla fattura');
 if(counter==2){
      alert("Non ci sono altre linee da eliminare");
      return false;
   }   
 counter--;
  $("#linea" + counter).remove();
   calculateSum();
  });
 });
/////////////////////////////////////////


///////////////////////////////////FUNCTION ADD VELUES
$(document).ready(function(){           
  $(".somma").each(function() {
        $(this).keyup(function(){
            calculateSum();
        });
    });
 });
function calculateSum() {
    var sum = 0;
    //iterate through each textboxes and add the values
    $(".somma").each(function() {

        //add only if the value is number
        if(!isNaN(this.value) && this.value.length!=0) {
            sum += parseFloat(this.value);
        }
    });
    //.toFixed() method will roundoff the final sum to 2 decimal places
    //$("#sum").html(sum.toFixed(2));
    $('.totale input').val(sum.toFixed(2));
}

【问题讨论】：

标签： jquery input dynamically-generated addition subtraction

【解决方案1】：

试试下面的：

$.when($("#linea" + counter).remove()).then(function(){
    calculateSum();
});

Fiddle

【讨论】：

【解决方案2】：

您与name 和id 的属性混淆了。

您正在使用names 访问输入字段，它不起作用。我们可以使用class 名称或id 访问它们。

我修改了小提琴。检查this

【讨论】：

知道了！我需要“名称”属性通过$_POST 将值发送到 php，但我可以同时使用名称和 ID。非常感谢！！！
您再次计算总和，我相信这不是实际问题。相反，我建议在 remove 方法后进行回调并调用 calculateSum 方法。

【解决方案3】：

也许我遗漏了一些东西，但您似乎只需要在 remove 事件上调用 calculateSum()...

    $("#removeButton").click(function() {
      if (counter == 2) {
        alert("Non ci sono altre linee da eliminare");
        return false;
      }

      counter--;
      $("#linea" + counter).remove();
      calculateSum(); // <-- Add this
    });

【讨论】：

我在jsfiddle试过了，还是不行，你可以自己试试
如果您只需要在删除元素时更新总数，那么它在 jsfiddle 中对我有用，您是否点击了“运行”之后？
对不起@iovis，我的错，你的方式和其他人一样好，而且是第一个，所以我接受。对不起大家，我造成了一些混乱。