从动态添加的输入文本JQuery加法/减法

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

CODE：（与解决方案更新提出@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)); 
}

来源

2014-09-26 uomopalese

也许我失去了一些东西，但似乎你只需要在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 
    });

来源

2014-09-26 12:07:19 iovis

我试图在[的jsfiddle（http://jsfiddle.net/uomopalese/1w54rhyv/），它不工作，你可以尝试自己 – uomopalese 2014-09-26 12:12:03

如果你只是需要得到总的更新，当你删除一个元素，然后它在jsfiddle中为我工作，你之后点击“运行”？ – iovis 2014-09-26 12:28:02

对不起[@iovis]（http://stackoverflow.com/users/4008739/iovis），我的错，你的方式和其他方式一样好，是第一个，所以我接受。对不起，我有点困惑。 – uomopalese 2014-09-26 13:48:42

你混淆attribites name和id。

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

我修改了小提琴。检查this

来源

2014-09-26 12:16:18 Gowri

Got it！我需要'name'属性通过'$ _POST'向php发送值，但是我可以同时使用name和id。非常感谢！！！ – uomopalese 2014-09-26 13:06:01

你再次计算总和，我相信这不是真正的问题。相反，我会建议在remove方法后调用calculateSum方法进行回调。 – Sai 2014-09-26 13:30:15

我猜你好... @SAi – uomopalese 2014-09-26 13:38:20

尝试以下：

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

Fiddle

来源

2014-09-26 12:25:34 Sai

哇！你的方式更加清洁，并且“即时”工作。 – uomopalese 2014-09-26 13:37:29

从动态添加的输入文本JQuery加法/减法

回答

相关问题