javascript - 如何获取动态输入框生成的两个文本框的倍数

Question

我想乘以 2 个输入框 (man_day_rates *estimated_man_days) 但输入是动态生成的并显示在小计中。问题是当我按下添加按钮时我只能计算第一个输入，第二个输入无法计算。

$(document).ready(function(){
     var i=1;
     $('#add').click(function(){

          i++;

          $('#dynamic_field').append('<tr id="row1'+i+'"><td style="border:none;"></td>\
         <td style="border:none;">\
               <input id="man_day_rates'+i+'" class="form-control  col-md-7 col-xs-12" type="number" min="1" name="man_days_rate[]" >\
         </td>\
         <td style="border:none;">\
               <input id="estimated_man_days'+i+'" class="form-control  col-md-7 col-xs-12" type="number" min="1" name="estimated_man_days[]">\
         </td>\
          <td style="border:none;"> <input id="result2" type="text" name="" value=""/></td>\
          <td style="height: 20px;line-height: 20px;white-space: nowrap; border:none;"><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn-xs btn_remove">X</button></td>\
          </tr> ');



     });

$(document).ready(function(){
        var man_day_rates = $('#man_day_rates1');
        var estimated_man_days = $('#estimated_man_days1');
        estimated_man_days.keyup(function(){
            var total=isNaN(parseInt(estimated_man_days.val()* man_day_rates.val())) ? 0 :(man_day_rates.val()* estimated_man_days.val());
            //$("#result").val(total);
            alert(total);
        });

        man_day_rates.keyup(function(){
            var total=isNaN(parseInt(estimated_man_days.val()* man_day_rates.val())) ? 0 :(man_day_rates.val()* estimated_man_days.val());
            //$("#result").val(total);
            alert(total);
        });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="table-responsive">
   <table class="table table-striped" id="dynamic_field" style="padding:0px;">
      <thead>
         <tr class="headings">
            <th class="column-title">#</th>
            <th class="column-title">Item Title</th>
            <th class="column-title">Description </th>
            <th class="column-title" style="width:100px;">Man Day Rates (RM)</th>
            <th class="column-title" style="width:100px;">Estimated Man Days </th>
            <th class="column-title"style="width:100px;">Subtotal (RM)</th>
            <th class="column-title"style="width:100px;"></th>
            </th>
         </tr>
      </thead>
      <tbody>
         <tr id="row01">
            <?php
               $i = 1;
               
               ?>
            <td style="border:none;">
               <input id="man_day_rates<?php echo $i; ?>" class="form-control  col-md-7 col-xs-12" type="number" min="1" name="man_days_rate[]" >
            </td>
            <td style="border:none;">
               <input id="estimated_man_days<?php echo $i; ?>" class="form-control  col-md-7 col-xs-12" type="number" min="1" name="estimated_man_days[]">
            </td>
            <td id=""> <input id="result" type="text" name="" value=""/></td>
            <td class="add_remove_button" style="height: 20px;line-height: 20px;white-space: nowrap;"></td>
         </tr>
      </tbody>
   </table>
</div>
<div><button id="add" type="button" class="btn btn-primary "><span class="fa fa-plus" style="margin-right:5px;"></span>Add Items</button></div>

我想乘以 2 个输入框 (man_day_rates *estimated_man_days) 但输入是动态生成的并显示在小计中。问题是当我按下添加按钮时我只能计算第一个输入，第二个输入无法计算。

Answer 1

每次动态添加新控件时，都必须初始化按键事件。
请尝试如下所示。

$(document).ready(function(){
$('#add').click(function(){

      i++;
      //Add field document History
      $('#dynamic_field').append('<tr id="row1'+i+'"><td style="border:none;"></td>\

     <td style="border:none;">\
           <input id="man_day_rates'+i+'" class="form-control  col-md-7 col-xs-12" type="number" min="1" name="man_days_rate[]" >\
     </td>\
     <td style="border:none;">\
           <input id="estimated_man_days'+i+'" class="form-control  col-md-7 col-xs-12" type="number" min="1" name="estimated_man_days[]">\
     </td>\
      <td style="border:none;"> <input id="result2" type="text" name="" value=""/></td>\
      <td style="height: 20px;line-height: 20px;white-space: nowrap; border:none;"><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn-xs btn_remove">X</button></td>\
      </tr> ');

    var man_day_rates = $('#man_day_rates'+i);
    var estimated_man_days = $('#estimated_man_days'+i);
    estimated_man_days.keyup(function(){
        var total=isNaN(parseInt(estimated_man_days.val()* man_day_rates.val())) ? 0 :(man_day_rates.val()* estimated_man_days.val());
        //$("#result").val(total);
        alert(total);
    });

    man_day_rates.keyup(function(){
        var total=isNaN(parseInt(estimated_man_days.val()* man_day_rates.val())) ? 0 :(man_day_rates.val()* estimated_man_days.val());
        //$("#result").val(total);
        alert(total);
    });

 });

    });