如何阻止AJAX加载的表单提交？jQuery submit绑定失效问题

这个问题我太熟啦！你遇到的是动态DOM元素绑定事件的经典坑——当你的外部JS文件执行时，通过AJAX加载的表单还没被插入到页面的DOM结构里呢！这时候$("form").submit(...)根本找不到要绑定的表单元素，自然就没效果啦。而把代码放在AJAX加载的表单后的<script>标签里，此时表单已经存在于DOM中，绑定就能成功生效。

那怎么在外部JS文件里解决这个问题呢？答案就是用事件委托（Event Delegation），利用jQuery的.on()方法把事件绑定到一个已经存在的静态父元素上，比如你用来加载表单的那个div，甚至是document（不过优先选离表单近的静态父元素，性能更好）。

举个具体的例子：假设你是把表单加载到id为form-container的div里，那外部JS里可以这么写：

// 绑定到静态父元素，监听子元素form的submit事件
$("#form-container").on("submit", "form", function(e) {
  e.preventDefault(); // 阻止默认提交行为
  alert('submit intercept');
});

原理说明： #

事件委托是利用DOM事件冒泡的特性——当子元素（这里是动态加载的表单）触发submit事件时，事件会向上冒泡到它的父元素。我们在父元素上提前监听这个事件，当事件冒泡过来时，就会执行我们的处理函数，不管子元素是一开始就存在的，还是后来通过AJAX动态加载的，都能被拦截到。

额外小提示： #

• 尽量不要直接绑定到document上，选择离目标表单最近的、页面加载时就存在的静态元素，这样可以减少事件冒泡的层级，提升性能。
• 如果多次加载表单，事件委托不会出现重复绑定的问题（直接绑定的话可能会多次触发处理函数），这也是它的一大优势。

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