如何在表格中追加行并在名为 subtotal 的 id 中显示所有价格后 jquery 中的价格总和答案

【问题标题】：How to sum of price in jquery after Append raw in a table and show all price in a id named sub_total如何在表格中追加行并在名为 subtotal 的 id 中显示所有价格后 jquery 中的价格总和
【发布时间】：2019-05-28 22:47:56
【问题描述】：

我正在制作一个模块，如果我点击一个产品项目，它将通过 append 方法添加购物车列表。附加任何项目后，每个附加项目的价格将求和。然后在另一个 id 上显示此求和结果，例如 id 名称 sub_total

这是我的附加代码

$('#selectedMenu').append('<tr class="menu-row"><td><input type="text" class="price no-style" name="menu_price[]" id="menu_price" value="' + data.price + '"><input type="hidden" id="menu_hidden_price" value="' + data.price +'"></td><td><span class="btn btn-xs btn-danger"><i class="cancel fa fa-times"></i></span></td></tr>');

追加后按名为price的类获取所有价格并汇总所有价格

   $(document).on('click ready keyup change', '.price', function(){
        var sum = 0;

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

         $('#sub_total').val(sum);
    });

汇总结果将显示在由名为 sub_total 的 id 定义的输入字段上

    <table class="table order-bill">
           <tr>
                <th>Sub Total</th>
                 <td><input type="text" value="0.00" class="no-style" id="sub_total"></td>
           </tr>

           <tr>
               <th>Total</th>
               <td><input type="text" value="0.00" class="no-style" id="total_price"></td>
            </tr>
     </table>

【问题讨论】：

你的问题是什么？
如何在 jquery 中对价格求和后将 raw 附加到表中并在名为 sub_total 的 id 中显示所有价格
@BelalKhan 查看 .each 的规范，如果索引等于 .price 元素的长度 - 1 比 $('#sub_total').val(sum); 多
$('#sub_total').val(sum);这里没问题@Zydnar，我现在已经解决了我的问题。我的问题出在 jquery 事件中。
@BelalKhan 在这种情况下，我建议您自己回答这个问题以使其关闭。

标签： javascript jquery ajax

【解决方案1】：

我创建一个函数并在事件附加以下原始事件时调用此函数。

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

    $('#sub_total').val(sum);
}

【讨论】：

【解决方案2】：

问题是css选择器，你应该使用产品容器的类

$(document).on('click ready keyup change', '.price', function(){

改成

$(document).on('click ready keyup change', '.<CONTAINER-CLASS-HERE>', function(){

【讨论】：