新增表单行后自动填充功能失效的技术求助

问题根源 #

1. 新增行的中间输入框用了类名variable-field2，但事件监听绑定的是variable-field，导致新增行输入时无法触发自动填充逻辑
2. 原代码通过固定ID（如#quantitad_form2）查找同行的输入框，新增行的ID是带动态序号的，无法匹配到正确元素，应该用类选择器来定位同行元素

修复后的代码 #

JavaScript 部分

$(document).ready(function() {
  // 绑定事件到所有带variable-field类的输入框，包括后续新增的
  $(document).on("input", '.variable-field', function() {
    var $row = $(this).closest('.check');
    // 用类选择器找同行的数量输入框，而非固定ID
    var qty = $row.find('.quantity').val() || 0;
    // 用类选择器找同行的自动填充输入框
    $row.find('.totalcostprice').val(Math.ceil(qty / 3));
  });
});

$("#addRow").click(function(){
  var len = $('#dataAdd .container-fluid .form-row').length + 1;
  
  $("#dataAdd .container-fluid:last").append(`<div class="form-row check">
                   <div class="form-group col-md-4">
                   <label></label>
                   <input class="form-control" name="id_form${len}" id="id_form${len}" type="number" value="$id_form">
                   </div>
                   <div class="form-group col-md-4">
                   <label></label>
                   <input name="quantitad_form${len}" value="$quantitad_form${len}" class="form-control variable-field quantity" id="quantitad_form${len}" type="number">
                   </div>
                   <div class="form-group col-md-4">
                   <label></label>
                   <input name="quantitae_form${len}" class="form-control width-80 totalcostprice" id="quantitae_form${len}" type="text" readonly>
                   </div>
                 </div>`);
});

$("#deleteRow").click(function(){
  var len = $('#dataAdd .container-fluid .form-row').length;
  if(len > 1){
    $("#dataAdd .container-fluid .form-row").last().remove();
  }else{
    alert('Not able to Delete');
  }
});

HTML 部分（初始行类名已符合要求，无需修改）

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
  <h2>Imposta quantità di stampa Dataplate</h2>
    <div class="jumbotron jumbotron-fluid" id="dataAdd">
      <div class="container-fluid">
        <div class="form-row check">
          <div class="form-group col-md-4">
            <label>ID</label>
            <input name="id_form" value="$id_form" type="number" id="id_form1" class="form-control">
          </div>
          <div class="form-group col-md-4">
            <label>Totale Dataplate</label>
            <input name="quantitad_form" value="$quantitad_form" type="number" id="quantitad_form2" class="form-control variable-field quantity" />
          </div>
          <div class="form-group col-md-4">
            <label>Totale Energy Label</label>
            <input name="quantitae_form" value="$quantitae_form" type="number" id="quantitae_form2" class="form-control width-80 totalcostprice" readonly/>
          </div>
        </div>
      </div>
      <button class="btn btn-success" id="addRow">Aggiungi Riga</button> <button class="btn btn-danger" id="deleteRow">Cancella Riga</button>
    </div>
</div>

关键修改点说明 #

• 把新增行中输入框的variable-field2类改为variable-field，确保和初始行类名一致，让事件监听能覆盖所有新增行
• 将JS中查找同行元素的方式从固定ID改为类选择器（.quantity和.totalcostprice），避免动态ID带来的匹配问题
• 用反引号包裹模板字符串，提升代码可读性（可选优化）

内容的提问来源于stack exchange，提问作者ateve