基于Ajax和JQuery的多步骤表单提交异常求助

你的代码里，index()函数直接给#myForm绑定submit事件，但第一次AJAX提交后，#main-container里的表单是新生成的DOM元素，之前绑定的事件不会自动作用在新元素上。第二次提交时，新表单没有被绑定e.preventDefault()，触发了表单默认提交行为，导致页面刷新。

改用事件委托的方式绑定提交事件，把事件绑定到不会被替换的父元素上，确保新生成的表单也能触发事件：

$(document).ready(function() {
  // 初始加载表单
  jQuery.ajax({
    type: "post",
    url: 'index.php'
  }).done(function(msg) {
    $('#main-container').html(msg);
  });

  // 事件委托绑定submit事件
  $('#main-container').on('submit', '#myForm', function(e) {
    e.preventDefault();
    var formData = $(this).serialize(); // 直接获取当前提交的表单数据，更准确
    console.log(formData);
    jQuery.ajax({
      type: "POST",
      url: 'index.php',
      data: formData
    }).done(function(msg2) {
      console.log(msg2)
      $('#main-container').html(msg2);
    });
  });
});

• 移除原index()函数，改用on()方法实现事件委托，父元素选择固定存在的#main-container（不会被AJAX替换）
• 事件绑定目标为#myForm，无论表单是初始加载还是后续AJAX生成，只要在#main-container内就能触发事件
• 用$(this)替代$('#main-container').find('form')，直接获取当前提交的表单，避免容器内多表单时出错

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