问题描述
var str =""; var counter=0; $(document).ready(function() { $(".amount, .penalty").change(function() { var total = 0; var amount = parseInt($(".amount").val()) || 0; console.log("amount: "+amount); var penalty = parseInt($(".penalty").val()) || 0; console.log("penalty: "+penalty); total = amount + penalty; console.log(total); $("#total").html(total); }); $(".add").click(function() { alert(); str +="<div class='form-group row' >" +"<label class='col-xs-3 col-form-label mr-2'>Reason</label>" +"<div class='col-xs-9'>" + "<input type='text' class='form-control' id='reason"+counter+"' name='reason'>" +"</div>" +"<label class='col-xs-3 col-form-label mr-2'>Amount</label>" +"<div class='col-xs-9'>" + "<input type='text' class='form-control amount' id='amount"+counter+"' name='amount'>" +"</div>" + "<label class='col-xs-3 col-form-label mr-2'>Penalty</label>" +"<div class='col-xs-9'>" +"<input type='text' class='form-control penalty' id='penalty"+counter+"' name='penalty'>" +"</div>" + "<div class='col-xs-9'>" + "<button type='button' class='add'>+</button>" + "<button type='button' class='remove'>-</button>" + "</div>" + "</div>"; counter++; $("#customsAdd").append(str); }); });
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <!-- <select class="form-control col-md-6"> <option value="1">Customs</option> <option value="2">VAT</option> <option value="3">Excise</option> <option value="4">Others</option> </select>--> <!--div for customs!--> <div class="form-group row" id="forCustoms"> <label class="col-xs-3 col-form-label mr-2">Reason</label> <div class="col-xs-9"> <input type="text" class="form-control" id="reason" name="reason"> </div> <label class="col-xs-3 col-form-label mr-2">Amount</label> <div class="col-xs-9"> <input type="text" class="form-control amount" id="amount" name="amount"> </div> <label class="col-xs-3 col-form-label mr-2">Penalty</label> <div class="col-xs-9"> <input type="text" class="form-control penalty" id="penalty" name="penalty"> </div> <div class="col-xs-9"> <button type="button" class="add">+</button> <button type="button" class="remove">-</button> </div> </div> <!--div for customs! ends--> <div id="customsAdd"></div> <div class="col-md-12"> Total : <p id="total"></p> </div> </div> </body> </html>
总数“4”仅来自第一行，直到我的程序正确但是当我添加新行时，总数没有变化，并且在点击“+??”按钮后没有添加新行。如何带来新行在“+”按钮上按下并总计更改？在第二行输入数据后总数没有变化，“+”不起作用。
1楼
Mamun
5
已采纳
2019-02-25 06:45:10
您必须使用使事件处理动态创建的元素。 这将允许事件处理稍后添加到正文的元素。
更改：
$(".add").click(function() {
至
$(".container").on("click", ".add", function() {
您可以使用和来计算总数。 尝试以下方式：
var str = ""; var counter = 0; var total = 0; $(document).ready(function() { $(".container").on("input", ".amount, .penalty", function() { var tArr = $(".amount, .penalty").map(function(i,el){ return Number($(this).val()); }).get(); total = tArr.reduce((a,c) => a+c,0); //console.log(total); $("#total").html(total); }); $(".container").on("click", ".add", function() { str ="<div class='form-group row' >" +"<label class='col-xs-3 col-form-label mr-2'>Reason</label>" +"<div class='col-xs-9'>" + "<input type='text' class='form-control' id='reason"+counter+"' name='reason'>" +"</div>" +"<label class='col-xs-3 col-form-label mr-2'>Amount</label>" +"<div class='col-xs-9'>" + "<input type='text' class='form-control amount' id='amount"+counter+"' name='amount'>" +"</div>" + "<label class='col-xs-3 col-form-label mr-2'>Penalty</label>" +"<div class='col-xs-9'>" +"<input type='text' class='form-control penalty' id='penalty"+counter+"' name='penalty'>" +"</div>" + "<div class='col-xs-9'>" + "<button type='button' class='add'>+</button>" + "<button type='button' class='remove'>-</button>" + "</div>" + "</div>"; counter++; $("#customsAdd").append(str); }); $(".container").on("click", ".remove", function() { if($(".form-group.row").length > 1){ // remove only if there is more than one element $(this).closest('.form-group.row').remove(); $(".amount, .penalty").trigger("input"); } }); });
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <div class="container"> <!-- <select class="form-control col-md-6"> <option value="1">Customs</option> <option value="2">VAT</option> <option value="3">Excise</option> <option value="4">Others</option> </select>--> <!--div for customs!--> <div class="form-group row" id="forCustoms"> <label class="col-xs-3 col-form-label mr-2">Reason</label> <div class="col-xs-9"> <input type="text" class="form-control" id="reason" name="reason"> </div> <label class="col-xs-3 col-form-label mr-2">Amount</label> <div class="col-xs-9"> <input type="text" class="form-control amount" id="amount" name="amount"> </div> <label class="col-xs-3 col-form-label mr-2">Penalty</label> <div class="col-xs-9"> <input type="text" class="form-control penalty" id="penalty" name="penalty"> </div> <div class="col-xs-9"> <button type="button" class="add">+</button> <button type="button" class="remove">-</button> </div> </div> <!--div for customs! ends--> <div id="customsAdd"></div> <div class="col-md-12"> Total : <p id="total"></p> </div> </div>
2楼
Jon P
0
2019-02-25 07:24:57
，你需要on 。
我们也可以做一些其他的改进。
我们可以使用您现有的行作为模板，因此如果您更改了html，则可能不需要更改您的javascript。
您的添加功能也存在逻辑问题，它目前不会获得所有字段。
var str =""; var counter=0; $(document).ready(function() { //Use existing row as a template var rowTemplate = $("#forCustoms").clone(true); $(".container").on("change", ".amount, .penalty",function() { var total = 0; /*NOTE: Not sure what you want to actuall do here This will always get the fist values, not values for all var amount = parseInt($(".amount").val()) || 0; console.log("amount: "+amount); var penalty = parseInt($(".penalty").val()) || 0; console.log("penalty: "+penalty); */ /*To Total all values*/ var amount = 0; var penalty = 0; $(".form-group,.row").each(function(){ amount += parseInt($(this).find(".amount").val(),10) || 0; penalty += parseInt($(this).find(".penalty").val(),10) || 0; }) total = amount + penalty; console.log(total); $("#total").html(total); }); $(".container").on("click" ,".add",function() { alert(); //Clone our template var t2 = rowTemplate.clone(true); //Make Ids Unique $(t2).attr("id", "row" + counter); $(t2).find("[name=reason]").attr("id", "reason" + counter); $(t2).find("[name=amount]").attr("id", "amount" + counter); $(t2).find("[name=penalty]").attr("id", "penalty" + counter); counter++; $("#customsAdd").append(t2); }); });
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <!-- <select class="form-control col-md-6"> <option value="1">Customs</option> <option value="2">VAT</option> <option value="3">Excise</option> <option value="4">Others</option> </select>--> <!--div for customs!--> <div class="form-group row" id="forCustoms"> <label class="col-xs-3 col-form-label mr-2">Reason</label> <div class="col-xs-9"> <input type="text" class="form-control" id="reason" name="reason"> </div> <label class="col-xs-3 col-form-label mr-2">Amount</label> <div class="col-xs-9"> <input type="text" class="form-control amount" id="amount" name="amount"> </div> <label class="col-xs-3 col-form-label mr-2">Penalty</label> <div class="col-xs-9"> <input type="text" class="form-control penalty" id="penalty" name="penalty"> </div> <div class="col-xs-9"> <button type="button" class="add">+</button> <button type="button" class="remove">-</button> </div> </div> <!--div for customs! ends--> <div id="customsAdd"></div> <div class="col-md-12"> Total : <p id="total"></p> </div> </div> </body> </html>