个人中心
gpt4 book ai didi

javascript - 添加新行时在 javascript 上不工作

转载 作者：搜寻专家 更新时间：2023-10-31 08:09:12 25 4
gpt4 key购买 nike 

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>

enter image description here

总数“4”仅来自第一行，直到我的程序正确为止，但是当我添加新行时，总数没有改变，并且在单击“+”按钮后没有添加新行。如何在按下“+”按钮时带来新行并改变总数？在第二行输入数据后总数没有改变，“+”不起作用。

最佳答案

你必须使用 .on()使事件在动态创建的元素上起作用。这将允许事件对稍后添加到正文的元素起作用。

改变:

 $(".add").click(function() {

到

 $(".container").on("click", ".add", function() {

您可以使用 .map()和 reduce()来计算总数。试试下面的方法:

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>

关于javascript - 添加新行时在 javascript 上不工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54860775/

25 4 0
文章推荐： ios - 从这样的日期中删除时间 2016-02-10 00 :00:00
文章推荐： java - StringBuffer 的最大大小
文章推荐： ios - Firebase 检查空值 (Swift)
文章推荐： java - 使用 Swing 动态重新排列布局
搜寻专家
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com