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

在实际元素出现之前附加事件列表器。使用.on（）代替： 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>

如何使用动态输入框总计总价值？

1 个答案: