如何为表格中动态创建的所有表单统一处理提交事件

嘿，这个问题我之前也碰到过！核心原因是你在提交回调里用了frm.serialize()，而frm是你一开始获取的所有表单的集合——jQuery里当你对一个集合调用这类方法时，它只会作用于集合里的最后一个元素，所以不管点哪个提交按钮，都会用最后一个表单的数据。

直接改一行代码就搞定了：把回调里的frm换成$(this)。因为当某个表单触发submit事件时，this就指向那个被提交的具体表单，这样序列化的就是当前表单的数据，而不是整个集合的最后一个。

修改后的JS代码：

<script type="text/javascript">
  $('.manualImportSubmit').submit(function (e) {
    e.preventDefault();
    // 用$(this)指代当前正在提交的表单
    const currentForm = $(this);
    console.log(currentForm.serialize());
    // 对应的AJAX部分也要改成用currentForm
    $.ajax({
      type: currentForm.attr('method'),
      url: currentForm.attr('action'),
      data: currentForm.serialize(),
      success: function (data) {
        console.log('Submission was successful.');
      },
      error: function (data) {
        console.log('An error occurred.');
      }
    });
  });
</script>

另外，如果你的表单是之后动态添加到页面的（比如通过AJAX加载或者JS动态生成），直接用.submit()绑定事件可能会失效，这时候推荐用事件委托的方式，把事件绑定到一个已经存在的父元素（比如表格本身），这样新添加的表单也能触发事件：

<script type="text/javascript">
  // 假设你的表格有id="data-table"，没有的话用document也可以
  $('#data-table').on('submit', '.manualImportSubmit', function (e) {
    e.preventDefault();
    const currentForm = $(this);
    console.log(currentForm.serialize());
    // AJAX部分同样修改
    $.ajax({
      type: currentForm.attr('method'),
      url: currentForm.attr('action'),
      data: currentForm.serialize(),
      success: function (data) {
        console.log('Submission was successful.');
      },
      error: function (data) {
        console.log('An error occurred.');
      }
    });
  });
</script>

这样不管表单是一开始就有的还是后来动态生成的，都能正确处理每个表单的提交，而且完全不需要为每个表单单独写处理函数，完美符合你的需求！

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