Question

我在表单中有一个表格，可以在其中添加更多行。当我更改单元格内的值时，它应运行ajax函数。在第一行（在页面加载时加载）上运行良好，但是当我添加更多行时，该功能将不会影响其他行。

如何在新行上也使用$("form :input").change('input', urenForm);？

这不是原始脚本，但主要部分在于显示我的问题（原始内容太多，无法发布）

$(document).ready(function() {
  var counter = 0;

  $("#addrow").on("click", function() {
    var newRow = $("<tr>");
    var cols = "";

    cols += '<td><input type="text" class="form-control" name="name' + counter + '"/></td>';
    cols += '<td><input type="text" class="form-control" name="mail' + counter + '"/></td>';
    cols += '<td><input type="text" class="form-control" name="phone' + counter + '"/></td>';

    cols += '<td><input type="button" class="ibtnDel btn btn-md btn-danger "  value="Delete"></td>';
    newRow.append(cols);
    $("table.order-list").append(newRow);
    counter++;
  });



  $("table.order-list").on("click", ".ibtnDel", function(event) {
    $(this).closest("tr").remove();
    counter -= 1
  });


});

(function($) {
  function urenForm() {
    event.preventDefault();

    var target = event.target,
      parent = null;

    for (; target && target !== document; target = target.parentNode) {
      if (target.matches('tr')) parent = target;
    }

    var childnodes = parent.querySelectorAll('input, select'),
      data = new FormData();

    for (var i = 0; i < childnodes.length; i++) {
      var child = childnodes[i];
      data.append(child.name, child.value);
    }

    $.ajax({
      url: 'ajax.php',
      dataType: 'json',
      type: 'post',
      data: data,
      processData: false,
      contentType: false,
      success: function(data, textStatus) {
        alert('Changed');
      }
    });
  };
  $("form :input").change('input', urenForm);
})(jQuery);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <form>
    <table id="myTable" class=" table order-list">
      <thead>
        <tr>
          <td>Name</td>
          <td>Gmail</td>
          <td>Phone</td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="col-sm-4"><input type="text" name="name" class="form-control" /></td>
          <td class="col-sm-4"><input type="mail" name="mail" class="form-control" /></td>
          <td class="col-sm-3"><input type="text" name="phone" class="form-control" /></td>
          <td class="col-sm-2">
            <a class="deleteRow"></a>
          </td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="5" style="text-align: left;"><input type="button" class="btn btn-lg btn-block " id="addrow" value="Add Row" /></td>
        </tr>
      </tfoot>
    </table>
  </form>
</div>

添加新内容后如何重新加载Javascript / Jquery

0 个答案: