使用 preventDefault() 失效的根本原因在于事件监听器未在 DOM 加载完成后正确绑定——因表单是通过 AJAX 动态注入的，$("#create-submit").click(...) 在注入前执行，导致监听器未生效，表单按默认行为提交，触发 ? 插入 URL 并重载页面。
使用 `preventdefault()` 失效的根本原因在于事件监听器未在 dom 加载完成后正确绑定——因表单是通过 ajax 动态注入的，`$("#create-submit").click(...)` 在注入前执行，导致监听器未生效，表单按默认行为提交，触发 `?` 插入 url 并重载页面。
你遇到的问题并非 preventDefault() 本身失效，而是事件委托缺失导致的典型动态内容绑定失败。你的 app.js 中调用了 initListener()，其中 $("#create-submit").click(...) 是在 $(document).ready() 时立即执行的——但此时 #create-submit 按钮尚未存在（它由 changeRoute() 异步加载的 HTML 注入到 #app 中），因此 jQuery 找不到该元素，监听器根本未被注册。当用户点击按钮时，浏览器执行 <form> 的原生提交行为：空表单提交会向当前 URL 追加 ?（表示无查询参数），同时保留 hash（如 #create），于是出现 /?#create。
✅ 正确解法：使用事件委托（Event Delegation）
将事件监听器绑定在始终存在的父容器（如 #app 或 document）上，并指定目标选择器。这样即使按钮后续动态插入，事件也能被捕获：
// ✅ 替换 app.js 中的 submit 监听代码（推荐绑定到 #app）
$("#app").on("click", "#create-submit", function(e) {
e.preventDefault();
console.log("hi");
});或更稳妥地监听表单的 submit 事件（符合语义且避免按钮不存在风险）：
// ✅ 推荐：监听 form 的 submit 事件（需确保 form 有唯一标识或使用委托）
$("#app").on("submit", "form", function(e) {
e.preventDefault();
console.log("hi");
// 可选：获取所有字段值
const formData = $(this).serialize(); // 如 "fName=John&lName=Doe&email=test%40ex.com"
console.log("Form data:", formData);
});⚠️ 注意事项：
- 不要使用 $("form").submit(...) —— 这与 $("#create-submit").click(...) 同样面临 DOM 未就绪问题；
- $("#app").on(...) 必须在 #app 元素存在后调用（你的 $(document).ready() 已满足），且 #app 是静态存在的，完全可靠；
- 若 #app 内容会被多次重写（如切换路由），事件委托依然有效，无需重复绑定；
- 确保 initListener() 在 changeRoute() 完成注入后调用（你当前的 changeRoute() 是异步的，但 initListener() 在 ready 时即执行，而 changeRoute() 内部的 $.get() 是异步回调，因此监听器必须委托，不能直绑）。
? 额外建议：为调试添加验证
在监听器内加入检查，确认事件是否真正触发：
$("#app").on("click", "#create-submit", function(e) {
e.preventDefault();
console.log("✅ Submit intercepted. Button exists:", $(this).length > 0);
console.log("✅ Current URL (no ? added):", window.location.href);
});总结：动态注入内容时，永远优先使用事件委托（$(staticParent).on(event, dynamicSelector, handler)），而非直接绑定。这是 jQuery 处理 AJAX 加载 DOM 的标准实践，既符合你的作业约束（保留 e.preventDefault() 和 #create-submit 选择器），又彻底解决 URL 插入 ? 和控制台无输出的问题。
