javascript - 如何在表中附加原始数据后对 jquery 中的价格求和并在名为 sub_total 的 id 中显示所有价格

Question

我正在制作一个模块，如果我单击产品项目，它将通过附加方法添加购物车列表。附加任何项目后，每个附加项目的价格将相加。然后在另一个 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>');

追加后按名为价格的类获取所有价格并将所有价格相加

   $(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>

Answer 1

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

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

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