У меня есть динамическая форма с добавлением строк в дом с JQuery, и общая цена, кажется, действует странно

Question

Я могу добавить и удалить последнюю строку в моей динамической форме и вычислить сумму цен за единицу, но функция convertSumNoTax (), похоже, запускается только из первой строки, которая выводится php, каждая вторая строка добавляется к Дом через JQuery не запускает CalculateSumNoTax ();

Что я здесь не так делаю?

JS:

$(document).ready(function() {
        $("a[name='addline']").click(function(){
            $("input[name='counter']").val( Number($("input[name='counter']").val()) + 1 );
            var i = $("input[name='counter']").val();
            $('#quote > tbody:last').append('<tr id="row'+i+'"><td>'+i+'</td><td><input type="text" name="description_'+i+'" value=""  /></td><td><input type="text" name="quantity_'+i+'" value="1"  /></td><td><input type="text" name="unit_price_'+i+'" class="unit_price" value=""  /></td><td><select name="tax_percentage_'+i+'"><option value="0" selected="selected">0</option><option value="19.6">19.6%</option></select></td></tr>');
            event.preventDefault();
        });

        $("a[name='removeline']").click(function(){
            var i = $("input[name='counter']").val();
            if(i > 1){
                $("tr[id='row"+i+"']").remove();
                $("input[name='counter']").val( Number($("input[name='counter']").val()) - 1 );
            }
            event.preventDefault();
        });

        $(".unit_price").keyup(function() {
            $(this).keyup(function(){
                calculateSumNoTax();
            });
        });
    });

    function calculateSumNoTax() {
        var sum = 0;
        //iterate through each textboxes and add the values
        $(".unit_price").each(function() {
            //add only if the value is number
            if(!isNaN(this.value) && this.value.length!=0) {
                sum += parseFloat(this.value);
            }
         });

        //.toFixed() method will roundoff the final sum to 2 decimal places
        $("#notax").html(sum.toFixed(2));
    }

Answer 1

Я только что нашел ответ здесь: Jquery .keypress на динамически добавляемом вводе

Изменено на:

$ (". Unit_price"). Live ('нажатие клавиши ', function (e) {$ (this) .keyup (function () {calculateSumNoTax ();});});

Answer 2

Когда новая строка добавляется динамически, слушатель события (функция keyup) не присоединяется к ней.

Это должно быть сделано отдельно. Прослушиватели событий могут быть добавлены в «линию», как только она активна (создана).