Как суммировать цену в jquery после Добавить сырье в таблицу и показать всю цену в идентификаторе с именем sub_total

Question

Я делаю модуль, в котором, если я нажму на товар, он добавит список корзин методом добавления. после добавления любого элемента цена каждого добавляемого элемента будет суммироваться. и затем показать этот результат суммирования на другом идентификаторе, таком как имя идентификатора 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

    <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

Проблема в селекторе css, вы должны использовать класс контейнера продукта

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

Измените его на

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

Answer 2

Я создаю функцию и вызываю эту функцию в случае события, к которому добавляется следующее необработанное.

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

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