Question

我是jquery新手。我正在创建一个工具来统计动态创建的输入字段的小计和总计。工具具有动态和多个部分的功能，每个部分具有动态添加的输入字段。我的每个部分都有根据输入字段生成的自己的小计。我遇到的问题是，当我添加新节并将输入值输入到输入字段时，此节的小计往往也会更改上一节或父节的值，这是应该做的。

我已经使用jquery的事件委托将事件绑定到每个输入字段，以生成可以正常工作的小计。

这是我最初在div后面添加以创建部分的地方

 $(wrapper).append('<div class="col-sm-12" style="margin-bottom: 0;"><div class="panel panel-default" id="panel'+ counter +'">' + 
                     '<div class="panel-heading" role="tab" id="heading'+ counter +'"><h4 class="panel-title">' +
                     '<a class="'+collapsedClass+'" id="panel-lebel'+ counter +'" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse'+ counter +'" ' +
                     'aria-expanded="'+ariaExpanded+'" aria-controls="collapse'+ counter +'"> '+catgName+' </a><div class="actions_div" style="position: relative; top: -26px;">' +
                     '<a href="#" accesskey="'+ counter +'" class="remove_ctg_panel exit-btn pull-right"><span class="glyphicon glyphicon-remove"></span></a>' +
                     '<a href="#" accesskey="'+ counter +'" class="edit_ctg_label pull-right"><span class="glyphicon glyphicon-edit "></span> Edit</a>' +
                     '<a href="#" accesskey="'+ counter +'" class="pull-right" id="addButton2"> <span class="glyphicon glyphicon-plus"></span> Add child category</a></div></h4></div>' +
                     '<div id="collapse'+ counter +'" class="panel-collapse collapse '+expandedClass+'"role="tabpanel" aria-labelledby="heading'+ counter +'">'+
                     '<div class="panel-body"><div id="TextBoxDiv'+ counter +'"></div><a class="btn btn-xs btn-primary" accesskey="'+ counter +'" id="addButton3" ><span class="glyphicon glyphicon-plus"></span> Add New Attributes</a>' +
                     '<a class="btn btn-xs btn-success" accesskey="'+ counter +'" id="ajax_submit_button" >Done</a><table id="addaccount" class="table table-bordered"><tbody> <tr class="invoice-total" bgcolor="#f1f1f1"><td colspan="3" align="right"><strong>Sub-Total</strong></td><td><i class="fa fa-inr"></i><input class="sumamtcollected form-control " name="accttotal[]" type="text" value="" readonly style="background-color:white" ></td><td></td></tr></body></table></div></div></div></div>');
                counter++;

这些行是附加部分，用于动态地添加输入字段


var y = 1; 

         $(wrapper).on("click","#addButton3", function(e){
             e.preventDefault();

             var accesskey = $(this).attr('accesskey');
                                var currentTable = $(this).closest('table').attr('id');
             y++; 
             $('#panel'+accesskey).find('#TextBoxDiv'+accesskey).append('<table id="addaccount" class="table table-bordered"><tbody><tr><td><div class="col-sm-6 col-lg-12"><input type="text" name="mytext[]" class="form-control" placeholder="Enter Description"/></td></div><td><div class="col-sm-6 col-lg-12"><select name="tax" class="form-control tax"><option value="m3">m3</option><option value="m2">m2 </option></select></div></td><td><div class="col-sm-6 col-lg-12"><input type="Client Name" class="form-control item_price" placeholder="Item Rate" name="item_price"></div></td><td><div class="col-sm-6 col-lg-12"><input type="Client Name" class="form-control price item_tax" placeholder="Quantity"  name="item_tax"></div></td><td><div class="col-sm-6 col-lg-12"><input type="Client Name" class="form-control price sub_total" placeholder="Item Price"  name="sub_total[]"></div></td><td><button type="button" class="removeItem btn btn-default removeItem"  style="color:#df603f"value="-"><span class="glyphicon glyphicon-remove"></span></td></tr> </tbody></table>');

这些行正在计算值并生成小计


function calculateSum() {
    var currentTable = $(this).closest('table').attr('id');
    calculateTableSum(currentTable);
}

function calculateTableSum(currentTable) {
    var sum = 0;
    $('#' + currentTable + ' input.sub_total').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
    $('#' + currentTable + ' input.sumamtcollected').val(sum.toFixed(2));
}
$(document).on('change', 'input.sub_total', calculateSum);
$(wrapper).on('change', 'input.sumamtcollected', calculateSum);
var onChangeCallback = function () { 
   var currentTable = $(this).closest('table').attr('id');
   var itemprice = $(this).parents('tr').find('.item_price').val();
   var  taxrate = $(this).parents('tr').find('.tax').val();
   var  service = $(this).parents('tr').find('.item_tax').val();

   var tax =    taxrate * itemprice /100;
    var total = parseFloat(itemprice) * parseFloat(service);


   $(this).parents('tr').find('.sub_total').val(total.toFixed(2));
   calculateTableSum(currentTable);

    };

 $('.item_tax').on('input', onChangeCallback);

这是我使用的示例bootsnip的链接

https://bootsnipp.com/snippets/Pajeb

每次添加新部分时，如何使用事件委托将变量绑定到动态创建的表以触发事件？

0 个答案: