如何將總價值與動態輸入框總和？

Question

我該如何修改以獲得總和值？我測試過這段代碼可以在文本框固定爲HTML時自動求和。但它不能與動態輸入框自動求和。我錯過了什麼？

一個問題 - 如何在用戶刪除行

下面是測試Auto Sum with dynamic add input box Jsfillder

的JavaScript負值

//this is dynamic add input box 

$(document).ready(function() { 
    var max_fields = 10; //maximum input boxes allowed 
    var wrapper = $(".input_fields_wrap"); //Fields wrapper 
    var add_button = $(".add_field_button"); //Add button ID 

    var x = 1; //initlal text box count 
    $(add_button).click(function (e) { //on add input button click 
    e.preventDefault(); 
    if (x < max_fields) { //max input box allowed 
     x++; //text box increment 
     //$(wrapper).append('<div><input type="text" name="mytext[]"/><a href="#" class="remove_field">Remove</a></div>'); //add input box 
     $(wrapper).append('<div class="col-lg-12 product_wrapper">' + 

         '<div class="col-lg-3" >' + 
         '<label>Product</label>' + 
         '<textarea type="text" class="product_textarea" name="Product[]"></textarea>' + 
         '</div>' + 

         '<div class="col-lg-6">' + 
         '<label>Description</label>' + 
         '<textarea class="description_textarea" name="ProductDescription[]" style=""></textarea>' + 
         '</div>'+ 

         '<div class="col-lg-2 form-group">' + 
         '<label>Price</label>' + 
         '<input type="text" class="price_tag form-control" name="Price[]"/>' +             
         '</div>' + 

         '<a href="#" class="remove_field btn btn-danger pull-right">cancel</a>' + 

         '</div>'          ); 
    } 
    }); 

    $(wrapper).on("click", ".remove_field", function (e) { //user click on remove text 
    e.preventDefault(); $(this).parent('.product_wrapper').remove(); x--; 
    })  

    //here is my calculate function  

    //Iterate through each Textbox and add keyup event handler 
    $(".price_tag").each(function() { 
    $(this).keyup(function (e) { 
     e.preventDefault(); 
     //Initialize total to 0 
     var total = 0; 
     $(".price_tag").each(function() { 
     // Sum only if the text entered is number and greater than 0 
     if (!isNaN(this.value) && this.value.length != 0) { 
      total += parseFloat(this.value); 
     } 
     }); 
     //Assign the total to label 
     //.toFixed() method will roundoff the final sum to 2 decimal places 
     $('#total').val(total.toFixed(2)); 
    }); 
    }); 

}); 

HTML

<div class="input_fields_wrap"></div> 

<button class="add_field_button btn btn-primary pull-right">Add More Fields</button> 

<div>total</div> 
<div><input class="total" id="total"type="text" name="txt"/></div> 

Answer 1

您附上事件在實際元素出現之前列出。 使用。對（），而不是： http://api.jquery.com/on/

這將創建一個偵聽器，將每一個你壓上「.price_tag」按鈕時檢查，即使你沒有帶class ='price_tag元素「你的文檔中尚未：

$("body").on('keyup', '.price_tag', function (e) 

工作例如：

$(document).ready(function() { 
 
    var max_fields = 10; //maximum input boxes allowed 
 
    var wrapper = $(".input_fields_wrap"); //Fields wrapper 
 
    var add_button = $(".add_field_button"); //Add button ID 
 

 
    var x = 1; //initlal text box count 
 
    $(add_button).click(function(e) { //on add input button click 
 
    e.preventDefault(); 
 
    if (x < max_fields) { //max input box allowed 
 
     x++; //text box increment 
 
     //$(wrapper).append('<div><input type="text" name="mytext[]"/><a href="#" class="remove_field">Remove</a></div>'); //add input box 
 
     $(wrapper).append('<div class="col-lg-12 product_wrapper">' + 
 

 
     '<div class="col-lg-3" >' + 
 
     '<label>Product</label>' + 
 
     '<textarea type="text" class="product_textarea" name="Product[]"></textarea>' + 
 
     '</div>' + 
 

 
     '<div class="col-lg-6">' + 
 
     '<label>Description</label>' + 
 
     '<textarea class="description_textarea" name="ProductDescription[]" style=""></textarea>' + 
 
     '</div>' + 
 

 
     '<div class="col-lg-2 form-group">' + 
 
     '<label>Price</label>' + 
 
     '<input type="text" class="price_tag form-control" name="Price[]"/>' + 
 
     '</div>' + 
 

 
     '<a href="#" class="remove_field btn btn-danger pull-right">cancel</a>' + 
 

 
     '</div>'); 
 
    } 
 
    }); 
 

 
    $(wrapper).on("click", ".remove_field", function(e) { //user click on remove text 
 
    e.preventDefault(); 
 
    $(this).parent('.product_wrapper').remove(); 
 
    calculateTotal(); 
 
    x--; 
 
    }) 
 

 
    function calculateTotal() { 
 
    //Initialize total to 0 
 
    var total = 0; 
 
    $(".price_tag").each(function() { 
 
     // Sum only if the text entered is number and greater than 0 
 
     if (!isNaN(this.value) && this.value.length != 0) { 
 
     total += parseFloat(this.value); 
 
     } 
 
    }); 
 
    //Assign the total to label 
 
    //.toFixed() method will roundoff the final sum to 2 decimal places 
 
    $('#total').val(total.toFixed(2)); 
 
    } 
 

 
    //Iterate through each Textbox and add keyup event handler 
 
    $("body").on('keyup', '.price_tag', function(e) { 
 

 
    e.preventDefault(); 
 
    calculateTotal(); 
 

 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="input_fields_wrap"></div> 
 

 
<button class="add_field_button btn btn-primary pull-right">Add More Fields</button> 
 

 
<div>total</div> 
 
<div> 
 
    <input class="total" id="total" type="text" name="txt" /> 
 
</div>