AJAX表单POST首次提交正常第二次触发页面重载的原因及解决方法

问题根因 #

这是典型的动态DOM事件绑定失效问题：

• 页面首次加载时，你给id为test的表单绑定了submit事件拦截逻辑，此时表单是静态DOM元素，绑定生效，第一次删除可以正常阻止表单默认提交行为
• 第一次删除成功后，你调用load()方法替换了整个#deleteMangement区域的内容，原来绑定了事件的#test表单被完全移除，新加载进来的#test表单是全新的DOM元素，之前绑定的submit事件没有应用到新元素上
• 第二次点击删除按钮时，没有事件拦截逻辑，表单触发默认的提交行为，就会重载整个页面

解决方法 #

推荐使用事件委托的方式绑定submit事件，把事件绑定到页面加载后永远不会被替换的父级元素上，就算内部表单被替换，事件仍然会生效。
把你现有的JS代码替换为以下内容即可：

// 将事件委托到document上，适配内部表单动态替换的场景
$(document).on("submit", "#test", function(event){
  event.preventDefault();
  $.post( "deleteManagement.php", $(this).serialize(), function(data){
    $("#output").html(data);
    $("#deleteMangement").load(location.href + " #deleteMangement");
  });
});

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