如何修改此值以获取总和值?我已经测试过这个代码,当文本框在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>
答案 0 :(得分:2)
在实际元素出现之前附加事件列表器。 使用.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>