jQuery中submit()事件委托问题：重复调用后页面重载

嘿，我来帮你搞定这个头疼的问题！你遇到的“第一次提交能无重载运行，之后就触发页面刷新”的情况，正好对应你查到的那个场景——动态添加的内容没有被正确绑定事件处理逻辑。

问题根源 #

直接用.submit()或者click这类“直接绑定”的方式，只会把事件绑定到页面初始加载时就存在的元素上。如果你的表单是通过AJAX或者其他方式动态插入到页面中的，这些新生成的表单/按钮根本没被绑定到你的自定义提交逻辑上。所以第二次点击时，触发的是浏览器默认的表单提交行为，自然就会页面重载了。

解决方案：用事件委托（推荐） #

事件委托是最优雅的解决方式，它利用DOM事件冒泡的特性，把事件绑定到一个页面加载时就存在的父元素（比如document，或者更靠近目标元素的静态容器）上，然后指定要监听的目标选择器。这样不管是初始的还是后来动态添加的表单，触发事件时都会被正确捕捉到。

示例代码：

// 绑定submit事件到document，监听所有form元素的提交
$(document).on('submit', 'form', function(e) {
  // 首先阻止浏览器默认的表单提交行为（这是避免页面重载的关键）
  e.preventDefault();
  
  // 这里写你的AJAX处理逻辑
  var $form = $(this);
  $.ajax({
    url: $form.attr('action'),
    method: $form.attr('method'),
    data: $form.serialize(), // 序列化表单数据
    success: function(response) {
      // 处理返回的响应，比如更新页面内容、提示成功信息等
      console.log('提交成功！', response);
    },
    error: function(xhr) {
      console.error('提交失败', xhr);
    }
  });
});

如果你的提交是通过按钮点击触发的（比如原来的代码是在按钮click事件里调用$(this).parents('form').submit()），那按钮的click事件也要改成事件委托的方式：

// 监听所有.submit-btn类按钮的点击事件，包括动态添加的
$(document).on('click', '.submit-btn', function(e) {
  e.preventDefault(); // 阻止按钮的默认行为
  var $form = $(this).parents('form');
  
  // 直接执行AJAX提交，而不是调用$form.submit()
  $.ajax({
    url: $form.attr('action'),
    method: $form.attr('method'),
    data: $form.serialize(),
    success: function(res) {
      // 处理结果
    }
  });
});

备选方案：动态添加后重新绑定事件 #

这种方法不如事件委托优雅，但如果你的场景比较简单也可以用——每次动态加载完表单内容后，重新给新的表单绑定提交事件：

// 假设这是你加载动态表单的函数
function loadNewForm() {
  // 加载表单HTML
  $.get('/your-form-endpoint', function(formHtml) {
    // 把表单插入到页面中
    $('#form-container').html(formHtml);
    
    // 给新插入的表单重新绑定提交事件
    $('#form-container form').submit(function(e) {
      e.preventDefault();
      // 执行AJAX提交逻辑
    });
  });
}

不过这种方法需要你记住每次动态更新内容后都要重新绑定，容易遗漏，所以更推荐用事件委托。

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