在javascript上添加新行时不起作用

时间：2019-02-25 06:42:45

标签： javascript jquery html 

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”仅出现在第一行，直到我的程序正确为止，但是当我添加新行时，总数没有变化，并且在单击“ +”按钮后未添加新行。在“ +”按钮上按下新行并更改总数？在第二行输入数据后总和没有改变，并且“ +”不起作用。

2 个答案:

答案 0 :(得分：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>

答案 1 :(得分：0)

Mamun is right，您需要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>

相关问题
最新问题