我的函数验证不适用于添加的行

Question

我有一个函数，我的输入 type="number" data-id="weight" 检查用户是否输入了可被 5 整除的值。它在我当前的行上完美运行，但是当我添加新行时，它不起作用。有什么我想念的吗？我在下面提供了我的 sn-p。谢谢大家。

试试看。请在重量栏中输入一个不能被 5 整除的数字，然后您会看到错误。添加行并执行相同操作，您将看不到错误。我的目标也是处理添加行的函数。

$("#addrow").on('click', function() {

  let rowIndex = $('.auto_num').length + 1;
  let rowIndexx = $('.auto_num').length + 1;

  var newRow = '<tr><td><input class="auto_num"  type="text" name="entryCount" value="' + rowIndexx + '" /></td>"' +
    '<td><input name="lightBand' + rowIndex + '" id="auto"  value="" class="form"  type="number"  /></td>"' +
    '<td><input data-id="weight" name="weight' + rowIndex + '" type="number" placeholder="not working divisible by 5" /></td>"' +
    '<td><input id="wingBand" name="wingBand' + rowIndex + '" type="number" /></td>"' +
    '<td><input type="button" class="removerow" id="removerow' + rowIndex + '" name="removerow' + rowIndex + '" value="Remove"/></td>';

  $("#applicanttable > tbody > tr:last").after(newRow);


});

// divisible by only 5
const inputer = document.querySelectorAll('input[data-id="weight"]');
inputer.forEach(input => {
  input.addEventListener('change', () => {
    if (input.value % 5 !== 0) {
      alert('not valid');
      input.value = 5;
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-bordered" border="1" id="applicanttable">
  <thead>
    <tr>
    </tr>
  </thead>
  <tbody>
    <div class="row">
      <tr>
        <th>#</th>
        <th>LB#</th>
        <th>Weight#</th>
        <th>Wingband #</th>
        <th>Action</th>
      </tr>
      <tr id="row_0">
        <td>
          <input id="#" name="#" class="auto_num" type="text" value="1" readonly />
        </td>
        <td class="labelcell">
          <input value="" class="hehe form-control" placeholder="" required id="auto" />
        </td>
        <td class="labelcell">
          <input data-id="weight" name="weight1" type="number" placeholder="Working divisible by 5" />
          <input data-id="weight" name="weight1" type="number" placeholder="Working divisible by 5" />
        </td>
        <td class="labelcell">
          <input name="wingBand" class="hehe form-control" type="number" />
        </td>
        <td class="labelcell">
          <input type="button" class="removerow" id="removerow0" name="removerow0" value="Remove">
        </td>
      </tr>
    </div>
  </tbody>
  </div>
  <tfoot>
    <tr>
    </tr>
    <tr>
      <button type="button" id="addrow" style="margin-bottom: 1%;">Add Row</button>
    </tr>
  </tfoot>
</table>

Answer 1

在添加表格行后添加change event listener。将上面的代码修改如下：

$("#addrow").on('click', function(){ 
            
            let  rowIndex = $('.auto_num').length+1;
            let  rowIndexx = $('.auto_num').length+1;
        
            var newRow = '<tr><td><input class="auto_num"  type="text" name="entryCount" value="'+rowIndexx+'" /></td>"' +
                            '<td><input name="lightBand'+rowIndex+'" id="auto"  value="" class="form"  type="number"  /></td>"' +
                            '<td><input data-id="weight" name="weight'+rowIndex+'" type="number" placeholder="not working divisible by 5" /></td>"' +
                            '<td><input id="wingBand" name="wingBand'+rowIndex+'" type="number" /></td>"' +
                            '<td><input type="button" class="removerow" id="removerow'+rowIndex+'" name="removerow'+rowIndex+'" value="Remove"/></td>';
        
            $("#applicanttable > tbody > tr:last").after(newRow);    
            const list = document.querySelectorAll('input[data-id="weight"]');
            const input = list[list.length - 1];
            console.log(input)
            input.addEventListener('change', inputValidation);
        
        
        });
        
const inputValidation = (e) => {
    if (e.target.value % 5 !== 0) {
      alert('not valid');
      e.target.value = 5;
    }
}
        
           // divisible by only 5
 const inputer = document.querySelectorAll('input[data-id="weight"]');
inputer.forEach(input => {
  input.addEventListener('change', inputValidation);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>




<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <table class="table table-bordered" border="1" id="applicanttable">
    <thead>
      <tr>
      </tr>
    </thead>
       <tbody>
          <div class="row">
             <tr>
                <th>#</th>
                <th>LB#</th>
                <th>Weight#</th>
                <th>Wingband #</th>
                <th>Action</th>
             </tr>
             <tr id="row_0">
                <td>
                   <input id="#" name="#" class="auto_num" type="text" value="1" readonly />
                </td>
                <td class="labelcell">
                   <input value="" class="hehe form-control" placeholder="" required id="auto"/>
                </td>
                <td class="labelcell">
              <input data-id="weight"  name="weight1"  type="number" placeholder="Working divisible by 5" />
                <input data-id="weight"  name="weight1"  type="number" placeholder="Working divisible by 5" />
                </td>
                <td class="labelcell">
                   <input  name="wingBand"  class="hehe form-control" type="number" />
                </td>
                <td class="labelcell">
                   <input type="button" class="removerow" id="removerow0" name="removerow0" value="Remove" >
                </td>
             </tr>
          </div>
       </tbody>
       </div>
       <tfoot>
         <tr>
         </tr>
         <tr>
         <button type="button" id="addrow" style="margin-bottom: 1%;">Add Row</button>
         </tr>
        </tfoot>                                        
   </table>

Answer 2

这是由于 change 事件的事件处理程序没有为动态创建的对象触发。

当您像这样创建事件处理程序时：

const inputer = document.querySelectorAll('input[data-id="weight"]');
inputer.forEach(input => {
    input.addEventListener('change', () => {
        ...
    }
});

处理程序仅映射到存在的元素当您第一次运行代码时。这意味着任何随后创建的动态元素不会导致事件触发。

改为使用以下语法创建事件，该事件将通过使用它们的选择器 (input[data-id="weight"]) 捕获动态创建的元素：

$(document).on('change', 'input[data-id="weight"]', function(e) { 
  if ($(this).val() % 5 !== 0) {
    alert('not valid');
    $(this).val(5);
  }
});

我已经删除了您之前尝试绑定事件处理程序的其他代码。你不需要用 jQuery 那样做。

在你的 sn-p 的工作版本中看到这里：

$("#addrow").on('click', function(){ 
            
            let  rowIndex = $('.auto_num').length+1;
            let  rowIndexx = $('.auto_num').length+1;
        
            var newRow = '<tr><td><input class="auto_num"  type="text" name="entryCount" value="'+rowIndexx+'" /></td>"' +
                            '<td><input name="lightBand'+rowIndex+'" id="auto"  value="" class="form"  type="number"  /></td>"' +
                            '<td><input data-id="weight" name="weight'+rowIndex+'" type="number" placeholder="not working divisible by 5" /></td>"' +
                            '<td><input id="wingBand" name="wingBand'+rowIndex+'" type="number" /></td>"' +
                            '<td><input type="button" class="removerow" id="removerow'+rowIndex+'" name="removerow'+rowIndex+'" value="Remove"/></td>';
        
            $("#applicanttable > tbody > tr:last").after(newRow);               
        
        
});

// divisible by only 5
$(document).on('change', 'input[data-id="weight"]', function(e) { 
  if ($(this).val() % 5 !== 0) {
    alert('not valid');
    $(this).val(5);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>




<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <table class="table table-bordered" border="1" id="applicanttable">
    <thead>
      <tr>
      </tr>
    </thead>
       <tbody>
          <div class="row">
             <tr>
                <th>#</th>
                <th>LB#</th>
                <th>Weight#</th>
                <th>Wingband #</th>
                <th>Action</th>
             </tr>
             <tr id="row_0">
                <td>
                   <input id="#" name="#" class="auto_num" type="text" value="1" readonly />
                </td>
                <td class="labelcell">
                   <input value="" class="hehe form-control" placeholder="" required id="auto"/>
                </td>
                <td class="labelcell">
              <input data-id="weight"  name="weight1"  type="number" placeholder="Working divisible by 5" />
                <input data-id="weight"  name="weight1"  type="number" placeholder="Working divisible by 5" />
                </td>
                <td class="labelcell">
                   <input  name="wingBand"  class="hehe form-control" type="number" />
                </td>
                <td class="labelcell">
                   <input type="button" class="removerow" id="removerow0" name="removerow0" value="Remove" >
                </td>
             </tr>
          </div>
       </tbody>
       </div>
       <tfoot>
         <tr>
         </tr>
         <tr>
         <button type="button" id="addrow" style="margin-bottom: 1%;">Add Row</button>
         </tr>
        </tfoot>                                        
   </table>