Implementei um formulário PaiXFilho, onde os usuários incluem as linhas e informam os dados nos campos, e existe o campo "valor_" onde eles devem informar um valor numérico. Preciso fazer a soma de todos esses valores incluídos no campo valor de cada uma das linhas adicionadas e depois incluir o resultado da soma em uma label ao final do formulário. Tentei utilizar essa função através de um evento "OnBlur" diretamente no input do campo valor e também com um evento "Click" no botão "Calcular" que criei porém de nenhuma das formas funcionou. A única forma que deu certo foi através do botão, porém algum erro na minha função fez com que o cálculo somasse mais de 1 vez o primeiro campo do formulário gerando uma soma incorreta dos valores. Existe uma forma diferente e mais funcional de implementar essa funcionalidade?
Segue minhas funções:
$("input[id^='valor___']").on("blur", function(){
somarTotal();
});
function somarTotal(){
var valor = 0;
// dessa forma irá funcionar
$(document).on("blur", "input[id^='valor___']", function(e){
valor = valor + parseFloat($(this).val());
});
// alimenta o label "valor antes das 15h" com a soma dos valores dos depósitos
$(".total-antes").text(valor);
}
function somarTotal(){
var valor = 0;
var total = 0;
var i = 0;
while (i < $("input[id^='valor___']").length){
valor = valor + parseFloat($("input[id^=valor___']").val());
i++;
}
$(".total-antes").text("R$ "+valor);
}Calcular
Tabela PaiXFilho: