本文详解为何动态注入的表单点击 submit 后仍触发页面重载、URL 出现“?”，以及如何通过绑定 form.submit 事件而非按钮 click 事件，配合 e.preventDefault() 彻底解决该问题。
本文详解为何动态注入的表单点击 submit 后仍触发页面重载、url 出现“?”，以及如何通过绑定 `form.submit` 事件而非按钮 `click` 事件，配合 `e.preventdefault()` 彻底解决该问题。
在使用 jQuery 动态注入 HTML（如通过 $.get() 加载表单片段到 #app 容器）的单页应用中，一个常见却易被忽视的问题是：为 <input type="submit"> 绑定 .click() 事件并调用 e.preventDefault() 无法可靠阻止表单提交行为。原因在于，当表单内容是后续异步加载的，而事件监听器在 DOM 尚未存在该元素时就已注册（即监听器绑定过早），或因事件委托缺失导致监听失效——尤其在你当前的代码中，$("#create-submit").click(...) 在 changeRoute() 执行前就运行，此时 #create-submit 元素尚未注入 DOM，监听器实际未生效。一旦用户点击 submit 按钮，浏览器将执行默认表单提交行为：以 GET 方法提交空数据，导致 URL 末尾追加 ?（例如 /#create → /?#create），页面刷新，“丢失” hash 导航状态。
✅ 正确解法：监听 form 元素的 submit 事件，并确保事件委托生效
由于表单是动态注入的，必须使用事件委托（event delegation）来捕获未来添加的表单元素事件。推荐写法如下：
// ✅ 正确：使用事件委托监听动态创建的 form 的 submit 事件
$(document).on('submit', 'form', function(e) {
e.preventDefault(); // 关键：阻止默认提交行为
console.log('hi'); // 验证事件已触发
// 可选：获取并格式化表单数据（兼容 assignment 要求）
const formData = $(this).serialize();
console.log('Form data:\n' + formData.split('&').join('\n'));
});? 关键要点说明：
- $(document).on('submit', 'form', ...) 利用事件冒泡机制，即使 <form> 是之后通过 AJAX 注入的，也能被正确捕获；
- 必须监听 submit 事件（而非 click），因为只有 submit 事件能被 preventDefault() 完整拦截表单的原生提交逻辑；
- e.preventDefault() 必须在 submit 处理函数内调用，且不能遗漏；
- 不再依赖 #create-submit ID 绑定 —— 这既规避了 DOM 不存在时绑定失败的问题，也符合“不修改注入逻辑”的约束。
⚠️ 注意事项：
- 确保该监听器在 $(document).ready() 内注册，但 无需等待 changeRoute() 执行完成；
- 若页面存在多个表单，且需区分处理，可在回调中通过 $(this) 获取当前提交的表单，并结合 $(this).attr('id') 或其他属性做条件判断；
- 避免重复绑定：若 initListener() 可能被多次调用（如 hash 变更时重执行），建议在绑定前先 off() 清除旧监听器，或改用一次性绑定策略。
? 补充建议（进阶）： 如需进一步结构化处理表单数据，可使用 new FormData(this)（原生 API）或 $(this).serializeArray()（jQuery），它们比 serialize() 更易解析为对象，便于后续验证或提交至后端：
const formData = new FormData(this);
for (let [key, value] of formData.entries()) {
console.log(`${key}: ${value}`);
}综上，问题根源不在 preventDefault 本身失效，而在于事件绑定时机与目标选择器不匹配。采用 $(document).on('submit', 'form', ...) 是兼顾动态内容、语义正确性与作业约束的最优实践。
