使用 preventDefault() 时，若事件监听器绑定在动态注入的 DOM 元素上而未正确委托，会导致默认提交行为未被拦截，从而触发页面重载、URL 中插入 ? 并跳转至 /#create 前的无效状态。核心在于事件委托缺失与监听时机不当。
使用 `preventdefault()` 时，若事件监听器绑定在动态注入的 dom 元素上而未正确委托，会导致默认提交行为未被拦截，从而触发页面重载、url 中插入 `?` 并跳转至 `/#create` 前的无效状态。核心在于事件委托缺失与监听时机不当。
你遇到的问题——点击提交后 URL 变为 www.webpage.com/?#create 并出现 ? 符号——本质是 表单默认提交行为未被真正阻止，即使代码中写了 e.preventDefault()。根本原因在于：你通过 AJAX 动态注入 HTML（$.get(...)），而 $("#create-submit").click(...) 在 $(document).ready() 中执行时，该按钮 尚未存在于 DOM 中，因此事件监听器绑定失败。后续用户点击的是一个“无监听器”的原生 <input type="submit">，浏览器遂执行默认表单提交（GET 方式），清空查询参数并追加 ?，再保留 hash（#create），最终形成 /?#create。
✅ 正确解法：使用事件委托（Event Delegation）
由于 .create 区域是后期注入的，应将事件监听器绑定到始终存在的父级元素（如 document 或 #app），并指定目标选择器：
// ✅ 正确：事件委托 —— 监听 document，代理到动态创建的 #create-submit
$(document).on("click", "#create-submit", function(e) {
e.preventDefault();
console.log("hi");
});⚠️ 注意事项：
- ❌ 不要写 $("#create-submit").click(...) 或 $("#create-submit").on("click", ...) —— 这属于直接绑定，对异步注入内容无效；
- ✅ 必须用 $(staticParent).on("event", "dynamicSelector", handler) 形式；
- 推荐将 #app 作为委托容器（更精准，性能略优）：
$("#app").on("click", "#create-submit", function(e) { e.preventDefault(); console.log("hi"); // 后续可扩展：获取表单数据 const formData = $(this).closest("form").serialize(); console.log("Form data:", formData); });
? 进阶建议（符合你“不可更改方法”的约束）：
你提到必须保留 $("#create-submit").click(...) 结构。此时唯一合规的补救方式，是在 HTML 注入完成后的回调中重新绑定：
// 在 model.js 的 $.get 回调内（注入完成后立即绑定）
$.get(`pages/${pageID}/${pageID}.html`, function(data) {
$("#app").html(data);
// ? 动态重绑 submit 按钮（确保按钮已存在）
$("#create-submit").off("click").on("click", function(e) {
e.preventDefault();
console.log("hi");
});
});? 总结：
- ? 出现在 URL 是浏览器对空 action 表单执行 GET 提交的默认表现；
- preventDefault() 失效 ≠ jQuery Bug，而是监听器根本未生效；
- 动态内容 = 必须用事件委托或注入后显式重绑；
- 表单语义化推荐监听 submit 事件而非 click（更健壮，兼容回车提交）：
$("#app").on("submit", "form", function(e) { e.preventDefault(); console.log("Form submitted — no ? in URL!"); });
遵循以上任一方案，即可彻底消除 ? 干扰，稳定捕获提交事件，并满足作业对 preventDefault 和绑定结构的硬性要求。
