追加更多输入字段后的 jQuery 计算答案

【问题标题】：jQuery Calculations after appending more input fields追加更多输入字段后的 jQuery 计算
【发布时间】：2014-10-11 10:33:02
【问题描述】：

我正在构建一个费用模板，但在使用 jQuery 计算和单击功能以附加一组输入字段时遇到问题。

我正在组合两个oncode，一个用于计算输入字段中值的总和，另一个用于在用户单击时添加新的输入字段行（这些也将添加到总和中）。问题是，总和没有添加到新附加行的总数中。仅添加默认字段行。

任何帮助表示赞赏（小提琴前：http://jsfiddle.net/NicoleScotsburn/o8x02sjh/4/）

带有输入代码的附加表：

            //Increment Variables
            var items = $('#items');
            var i = $('#items td').size() + 1;
            var mileage = $('#mileage');
            var j = $('#mileage td').size() + 1;

            //Append Table Rows
            $('#addItem').on('click', function() {
                    $('<tr><td>&nbsp;<label for="date"><input type="text" id="date" size="10" name="date_' + i +'" value="" placeholder="mm/dd/yyyy" /></label></td>' +
                      '<td>&nbsp;<label for="desc"><input type="text" id="desc" size="30" name="desc_' + i +'" /></label></td>' +
                      '<td>&nbsp;$<label for="entmt"><input type="text" id="sum" size="10" name="entmt_' + i +'" placeholder="0.00" /></label></td>' +
                      '<td>&nbsp;$<label for="meals"><input type="text" id="sum" size="10" name="meals_' + i +'" placeholder="0.00" /></label></td>' +
                      '<td>&nbsp;$<label for="other"><input type="text" id="sum" size="10" name="other_' + i +'" placeholder="0.00" /></label></td>' +
                      '<td>&nbsp;$<label for="travel"><input type="text" id="sum" size="10" name="travel_' + i +'" placeholder="0.00" /></label></td>' +
                      '<td>&nbsp;$<label for="lodging"><input type="text" id="sum" size="10" name="lodging_' + i +'" placeholder="0.00" /></label></td>' +
                      '<td>&nbsp;$<label for="hst"><input type="text" id="sum" size="10" name="hst_' + i +'" placeholder="0.00" /></label></td>' +
                      '<td>&nbsp;<a href="#" id="remItem">Remove</a></td></tr>').appendTo(items);
                    i++;
                    return false;
            });

            $('#addMileage').on('click', function() {
                    $('<tr><td>&nbsp;<label for="mdate"><input type="text" id="mdate" size="10" name="mdate' + j +'" value="" placeholder="mm/dd/yyyy" /></label></td>' +
                      '<td>&nbsp;<label for="mlocation"><input type="text" id="mlocation" size="30" name="mlocation' + j +'" value="" placeholder="" /></label></td>' +
                      '<td>&nbsp;<label for="km"><input type="text" id="km" size="10" name="km' + j +'" value="" placeholder="" />KM</label></td>' +
                      '<td>&nbsp;<a href="#" id="remMileage">Remove</a></td></tr>').appendTo(mileage);
                    j++;
                    return false;
            });


            //Remove Buttons
            $('body').on('click', '#remItem', function() { 
                    if( i > 2 ) {
                            $(this).parents('tr').remove();
                            i--;
                    }
                    return false;
            });
            $('body').on('click', '#remMileage', function() { 
                if( j > 2 ) {
                        $(this).parents('tr').remove();
                        j--;
                }
                return false;
             });

计算函数：（假设输入的 id 为 id="sum" 并输出到另一个名为 totalsum 的输入。

        $("input[id^=sum]").sum("keyup", "#totalSum");

【问题讨论】：

你能做一个 jsFiddle.net 的例子吗？
jsfiddle.net/NicoleScotsburn/o8x02sjh 虽然小提琴的例子不起作用，但似乎工作正常

标签： javascript jquery input append handler

【解决方案1】：

我不熟悉 jQuery 计算，但看起来你正在做的事情可以使用普通的 jQuery 或 javascript 来实现。我对 jquery sum 做了一个快速的谷歌搜索，我发现了另一个可能对你有帮助的 stackoverflow 帖子。 stackoverflow sum

您可以在所有要汇总的字段中添加一个名为“sum”的类属性，并使用标记为答案的 jquery。完成总额计算后，您可以将其分配给总额输入字段。

$('.sum').blur(function () {
    var sum = 0;
    $('.sum').each(function() {
       sum += Number($(this).val());
    });

    $("#totalsum").val(sum);
});

【讨论】：