Question

我有这种情况：我在表单中输入文本并使用它们进行一些计算（基本上是加法和减法）。可以通过jQuery使用onclick添加/删除文本输入（小计）。到目前为止，当我将它们添加到表单并将一些值放入其中时，我已经能够得到输入元素的总和（总数）。我现在缺少的是每当我删除一个文本输入时更新总和的方法。这是代码，我还有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));
}

Answer 1

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

Answer 2

尝试以下方法：

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

<强> Fiddle

Answer 3

您与attribites name和id混淆。

您正在使用names访问输入字段，但它无法正常工作。我们可以使用class名称或id。

来访问它们

我修改了小提琴。检查this

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

3 个答案: