点击提交按钮时的委托事件（jQuery）：如何通过e实现异步后提交表单？

没问题，完全可以只用事件对象e来实现你的需求！我来一步步给你讲清楚怎么弄：

首先，你原来的代码里用return false确实能阻止表单提交，但其实return false在jQuery事件处理里相当于同时做了e.preventDefault()和e.stopPropagation()，而我们这里只需要阻止表单的默认提交行为就够了，所以换成e.preventDefault()会更精准。

接下来，核心思路是：先阻止默认提交，等AJAX请求成功后，再手动触发表单的提交动作。具体代码可以这么写：

$submitButton.click(function(e){
  // 先阻止表单的默认提交行为
  e.preventDefault();
  
  // 调用你的异步方法，注意要让doSomething返回AJAX的jqXHR对象
  doSomething(e)
    .done(function(response) {
      // AJAX成功后，手动提交表单
      // 这里用原生DOM的submit()，避免再次触发jQuery的事件监听导致循环
      $submitButton.closest('form')[0].submit();
    })
    .fail(function() {
      // 可选：处理AJAX失败的情况，比如提示用户
      alert('请求失败，请稍后重试');
    });
});

然后你的doSomething方法需要返回AJAX请求的对象，这样才能链式调用.done()：

function doSomething(e) {
  // 这里可以根据需要使用事件对象e，比如获取表单数据之类的
  const formData = $(e.target).closest('form').serialize();
  
  return $.ajax({
    url: '/your-submit-url',
    method: 'POST',
    data: formData,
    // 其他配置项
  });
}

为什么这么做可行？

• e.preventDefault()会直接阻止浏览器默认的表单提交动作，这样表单就不会在AJAX请求还没完成时就提交了
• 等AJAX请求成功后，我们通过closest('form')找到按钮所在的表单，然后调用原生DOM元素的submit()方法——这个方法不会触发按钮的点击事件，所以不会再次进入我们的点击处理函数，也就不会出现循环提交的问题

如果你的doSomething已经是现成的方法，只要确保它能返回AJAX的jqXHR对象，就能用这个方式来衔接后续的提交动作啦。

内容的提问来源于stack exchange，提问作者Carlos Navarro Astiasarán