jQuery动态添加计算错误总数的表单字段

Question

首先；抱歉，如果我的问题无关紧要。因为我是<Window.Resources> <PathGeometry x:Key="AnimationPath" Figures="M100,50 L140,60 150,100 125,120 90,110 80,80Z"/> </Window.Resources> <Canvas> <Path Stroke="Black" StrokeThickness="5" Fill="Goldenrod" Data="{StaticResource AnimationPath}"/> <Image> <Image.Source> <DrawingImage> <DrawingImage.Drawing> <GeometryDrawing Geometry="M0,0 L10,8 0,16"> <GeometryDrawing.Pen> <Pen Thickness="3" Brush="Red"/> </GeometryDrawing.Pen> </GeometryDrawing> </DrawingImage.Drawing> </DrawingImage> </Image.Source> <Image.RenderTransform> <TransformGroup> <TranslateTransform X="-5" Y="-8"/> <MatrixTransform x:Name="AnimatedTransform"/> </TransformGroup> </Image.RenderTransform> <Image.Triggers> <EventTrigger RoutedEvent="Loaded"> <BeginStoryboard> <Storyboard RepeatBehavior="Forever"> <MatrixAnimationUsingPath Storyboard.TargetName="AnimatedTransform" Storyboard.TargetProperty="Matrix" Duration="0:0:5" DoesRotateWithTangent="True" PathGeometry="{StaticResource AnimationPath}"/> </Storyboard> </BeginStoryboard> </EventTrigger> </Image.Triggers> </Image> </Canvas> 和javascript的新手。

我有一个表单，有一些输入，并用jquery动态选择创建。但是以某种方式我无法计算一行的总价值 我的代码结构如下；

HTML：

jquery

用于添加新表单值的JavaScript

<div class="row">
    <div class="col-12">
        <h5 class="modal-title">Hizmet Ekle</h5>
        <br>
        <div id="services-cont">
            <div class="form-group  m-form__group row" id="services-inner">
                <fieldset id="add-services">
                    <div id="services" class="col-lg-12"></div>
                </fieldset>
            </div>
            <div class="m-form__group form-group row">
                <div class="col-lg-4">
                    <div class="btn btn btn-sm btn-brand m-btn m-btn--icon m-btn--pill m-btn--wide add-service">
                        <span>
                            <i class="la la-plus"></i>
                            <span>Ekle</span>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

用于计算值的JavaScript

// Adding new service container with form inputs
$('.add-service').on('click',function(){
    var current = $('.new-service').length;
    var partCount = current + 1;  
    var template = 
    '<div class="form-group m-form__group row align-items-center new-service" style="display:none;">\
        <div class="col-md-4">\
            <div class="form-group m-form__group">\
                <label for="services['+partCount+']">Hizmet</label>\
                <div class="m-input-icon m-input-icon--right">\
                    <select id="services['+partCount+']" name="services[]" data-id="'+partCount+'" class="form-control m-input m-input--air m-input--pill"></select>\
                </div>\
            </div>\
            <div class="d-md-none m--margin-bottom-10"></div>\
        </div>\
        <div class="col-md-2">\
            <div class="form-group m-form__group">\
                <label for="unit_price['+partCount+']">Birim Fiyat</label>\
                <div class="m-input-icon m-input-icon--right">\
                    <input name="unit_price['+partCount+']" type="text" class="form-control m-input m-input--pill m-input--air" disabled>\
                    <span class="m-input-icon__icon m-input-icon__icon--right"><span><i class="la la-try"></i></span></span>\
                </div>\
            </div>\
            <div class="d-md-none m--margin-bottom-10"></div>\
        </div>\
        <div class="col-md-2">\
            <div class="form-group m-form__group">\
                <label for="quantity['+partCount+']">Miktar Seçimi</label>\
                <div class="input-group m-input-group m-input-group--pill">\
                    <input name="quantity['+partCount+']" type="number" class="form-control m-input m-input--pill m-input--air" placeholder="Örn: 5 Adet">\
                    <div class="input-group-prepend"><span class="input-group-text">Adet</span></div>\
                </div>\
            </div>\
            <div class="d-md-none m--margin-bottom-10"></div>\
        </div>\
        <div class="col-md-2">\
            <div class="form-group m-form__group">\
                <label for="unit_price['+partCount+']">Toplam Fiyat</label>\
                <div class="m-input-icon m-input-icon--right">\
                    <input name="total_price['+partCount+']" type="text" class="form-control m-input m-input--pill m-input--air" disabled>\
                    <span class="m-input-icon__icon m-input-icon__icon--right"><span><i class="la la-try"></i></span></span>\
                </div>\
            </div>\
            <div class="d-md-none m--margin-bottom-10"></div>\
        </div>\
        <div class="col-md-1">\
            <div class="btn-sm btn btn-danger m-btn m-btn--icon m-btn--pill del-new-service">\
                <span>\
                    <i class="la la-trash-o"></i>\
                    <span>Kaldır</span>\
                </span>\
            </div>\
        </div>\
    </div>';
    $('#services').append(template); 
    $('#services').find(".new-service:last").slideDown("fast");   
    loadServices();
});
$("#services").on('click', '.del-new-service', function() {
    $(this).closest(".new-service").slideUp("fast", function() { 
        $(this).remove(); 
    });
});

由于// Calculating values var count; var unitPrice; var taxValue; var unitPriceWithTax var calculateUnitPrice = function(){ $("#services").on('change', 'select[name="services[]"]', function() { dataId = $(this).data('id'); unitPrice = parseFloat($(this).find(':selected').data('price')); taxValue = parseFloat($(this).find(':selected').data('tax')); unitPriceWithTax = parseFloat($(this).find(':selected').data('total')); // Append Unit Price $("input[name='unit_price["+dataId+"]']").val(unitPrice); // Append Total Price var quantity; $("input[name='quantity["+dataId+"]']").on('change', function(){ totalPrice = unitPrice * parseFloat($(this).val()); $("input[name='total_price["+dataId+"]']").val(totalPrice); }); console.log(dataId); // Total Units console.log(unitPrice); }); } ，我的计算功能出现问题。当我添加多个值并随机更改select on change method时，它在计算错误的行。我在这里迷路了。

示例屏幕截图；

任何帮助都非常有用。