從動態添加的輸入文本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加法/減法

回答

相關問題