javascript - 我的验证不适用于添加的行和自动编号

Question

我有一个可以添加行和自动编号的功能。当您单击“添加行”按钮时，添加行起作用，当您按Ctrl+Enter键时，当有 2 行或更多行时，自动编号起作用。我的问题是，我的验证不适用于我的自动编号。

例如：当我在文本框中手动输入“1”时，它可以工作。但是当我进行自动编号时，“不好”不会出现在我的第二个文本框中。

有什么我错过的吗？任何帮助将不胜感激。

//this is for adding rows
$("#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 + '"  value="" class="form"  type="number"  /> <span class="email_result"></span></td>"' +

    '<td><input type="button" class="removerow" id="removerow' + rowIndex + '" name="removerow' + rowIndex + '" value="Remove"/></td>';

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


});


//this is for my validation
$(document).on('change', 'input[name*=lightBand]', function() {

  var lightBand1 = $(this).val(); //get value
  var selector = $(this) //save slector
  selector.next('.email_result').html("") //empty previous error
  if (lightBand1 != '') {
    /*$.ajax({
      url: "<?php echo base_url(); ?>participant/check_number_avalibility",
      method: "POST",
      data: {
        lightBand1: lightBand1
      },
      success: function(data) {*/
    selector.next('.email_result').html("NOT GOOD"); //use next here ..
    /* }
    });*/
  }
});

// this is for autonumbering when ctrl+enter is pressed.

  const inputs = document.querySelectorAll(".form");
  
  document.querySelectorAll(".form")[0].addEventListener("keyup", e => {
  const inputs = document.querySelectorAll(".form");
    let value = parseInt(e.target.value);
    if ((e.ctrlKey || e.metaKey) && (e.keyCode == 13 || e.keyCode == 10)) {
      inputs.forEach((inp, i) => {
        if (i !== 0) {
          inp.value = ++value;
        }
      })
    }
  });

Add a row and type any number at number textbox column and press ctrl+enter. You'll see the "Not good" is not working on added rows. It'll only work if you enter the number manually per row.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/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>Number</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="form" name="lightBand1" placeholder="" id="lightBand1" />
          <span class="email_result"></span>
        </td>

        <td class="labelcell">
          <input type="button" class="removerow" id="removerow0" name="removerow0" value="Remove">
        </td>
      </tr>
    </div>
  </tbody>


  <tfoot>
    <tr>
    </tr>
    <tr>
      <button type="button"  id="addrow" style="margin-bottom: 1%;">Add Row</button>
    </tr>
  </tfoot>
</table>

标签： javascriptajaxcodeignitercodeigniter-3

Answer 1

您可以调用您的事件处理程序，即：change每当您通过自动编号更改输入值时。因此，使用$(this).trigger("change")wherethis指代更改值的输入。

演示代码：

$("#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 + '"  value="" class="form"  type="number"  /> <span class="email_result"></span></td>"' +

    '<td><input type="button" class="removerow" id="removerow' + rowIndex + '" name="removerow' + rowIndex + '" value="Remove"/></td>';

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


});


//this is for my validation
$(document).on('change', 'input[name*=lightBand]', function() {

  var lightBand1 = $(this).val(); //get value
  var selector = $(this) //save slector
  selector.next('.email_result').html("") //empty previous error
  if (lightBand1 != '') {
    /*$.ajax({
      url: "<?php echo base_url(); ?>participant/check_number_avalibility",
      method: "POST",
      data: {
        lightBand1: lightBand1
      },
      success: function(data) {*/
    selector.next('.email_result').html("NOT GOOD"); //use next here ..
    /* }
    });*/
  }
});

// this is for autonumbering when ctrl+enter is pressed.
$(document).on('keyup', '.form', function(e) {
  let value = parseInt(e.target.value);
  if ((e.ctrlKey || e.metaKey) && (e.keyCode == 13 || e.keyCode == 10)) {
    //loop through all values...
    $(".form").each(function(i) {
      if (i !== 0) {
        $(this).val(++value); //assign new value..
        $(this).trigger("change") //call your change event to handle further...
      }
    })
  }
})

Add a row and type any number at number textbox column and press ctrl+enter. You'll see the "Not good" is not working on added rows. It'll only work if you enter the number manually per row.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/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>Number</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="form" name="lightBand1" placeholder="" id="lightBand1" />
          <span class="email_result"></span>
        </td>

        <td class="labelcell">
          <input type="button" class="removerow" id="removerow0" name="removerow0" value="Remove">
        </td>
      </tr>
    </div>
  </tbody>


  <tfoot>
    <tr>
    </tr>
    <tr>
      <button type="button" id="addrow" style="margin-bottom: 1%;">Add Row</button>
    </tr>
  </tfoot>
</table>