jquery - 从动态创建的元素中获取总和答案

【问题标题】：jquery - get sum from dynamicaly created elementsjquery - 从动态创建的元素中获取总和
【发布时间】：2017-10-06 10:39:15
【问题描述】：

我正在构建一个表格来计算某些服务的总和。用户必须输入净额和增值税金额（％），然后程序应该计算总金额和总增值税金额。每次更改输入字段之一时，它应自动更新总计和增值税总计框。用户也可以插入多行（相同的类，唯一的 id），这些也必须总结！这就是我迄今为止所做的FIDDLE。

使用下面的代码，我设法只计算了第一行，如果我插入.each()，那么它将计算代码中的每个元素，那么它就不起作用了！并且没有错误！不应该每个都返回其元素中指定的所有值吗？

$('#sig_3').on('change','.vat_calc',function(){
    var id = $(this).attr('id');
    var id_suffix_new = id.split('_').pop();
    var amount_val = parseFloat($('#amount_'+id_suffix_new).val());
    var vat_val = parseFloat($('#vat_'+id_suffix_new).val());
    var vat_amount = amount_val * vat_val;
    $('#vat_amount_'+id_suffix_new).val( parseFloat(vat_amount));
    total = amount_val+vat_amount;
    $('#total').val(parseFloat(total));
});

【问题讨论】：

ID 必须是唯一的，并且问题应该包括验证问题所需的所有代码 -> How to create a minimal, complete, and verifiable example
ids ARE 是独一无二的，正如我在上面已经写过的。完整的代码是 IN 小提琴。 @安德烈亚斯
这个问题可能会给你一些想法stackoverflow.com/questions/44894550/…
@taha 谢谢，但我已经看到了.. 帮助不大！我需要更简单、更易读的东西“/
小提琴中的代码与问题中的代码不同。 .val() 返回匹配元素集合中第一个元素的值

标签： javascript jquery html sum

【解决方案1】：

已更新您的小提琴，这是链接 - https://jsfiddle.net/bn4na8qc/3/

    $('ul').each(function() {
    var amount_val = parseFloat($(this).find('.amount').val());
    var vat_val = parseFloat($(this).find('.vat_calc').val());
    var vat_amount = amount_val * vat_val;
        $(this).find('.vat_amount').val(parseFloat(vat_amount));
        total_vat += parseFloat(vat_amount);
        total += amount_val + vat_amount;
    });

【讨论】：

【解决方案2】：

您可以通过这种方式添加动态输入的值：

$("#add").click(function(){
    $("#content").append("<input type='text' value=0 class='data' />");
})

$(document).on('change',".data",function(){
    var total = 0;
    $(".data").each(function(){
      total += parseFloat($(this).val());
    })
    $("#total").html(total);
});

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="https://code.jquery.com/jquery-2.1.4.js"></script>

</head>
<body>
  <div id="content">
    
  </div>
  <div id="total" style="width=100px;height:20px;background-color:#cbcbcb">
      
  </div>
  <button id="add" style="width:100px;height:20px">Add Input</button>
</body>
</html>

【讨论】：

不，我需要一个函数，每次 vat_calc 更改时它都会汇总所有内容！只是我无法更改整个代码