使用 preventDefault() 时，若事件监听器未在 DOM 加载完成后正确绑定（尤其是对动态注入的 HTML），会导致默认提交行为未被拦截，从而触发页面重载、URL 中插入 ? 并跳转至 /#create 前的空查询参数位置。核心在于事件委托缺失与监听时机不当。
使用 `preventdefault()` 时，若事件监听器未在 dom 加载完成后正确绑定（尤其是对动态注入的 html），会导致默认提交行为未被拦截，从而触发页面重载、url 中插入 `?` 并跳转至 `/#create` 前的空查询参数位置。核心在于事件委托缺失与监听时机不当。
你遇到的问题——点击提交按钮后 URL 变为 www.webpage.com/?#create，且控制台未输出 "hi"——并非 preventDefault() 失效，而是事件监听器根本未成功绑定到动态注入的 DOM 元素上。
原因分析如下：
你的 initListener() 函数在 $(document).ready() 中执行，此时 <section class="create"> 尚未存在（它由 changeRoute() 异步通过 $.get() 注入），因此 $("#create-submit").click(...) 查找不到目标元素，监听器注册失败。后续用户点击的是一个“无监听器”的原生 submit 按钮，浏览器执行默认表单提交行为：GET 方法提交空表单 → URL 自动追加 ?（表示空查询字符串），再保留原有 hash（#create），最终形成 /?#create。
✅ 正确解法是使用 事件委托（Event Delegation），将监听器绑定在始终存在的父容器（如 #app 或 document）上，并指定目标选择器：
// ✅ 正确：使用事件委托，确保动态生成的按钮也能响应
$("#app").on("click", "#create-submit", function(e) {
e.preventDefault();
console.log("hi");
});或更稳妥地监听表单的 submit 事件（推荐，语义更准确）：
// ✅ 推荐：监听 form 的 submit 事件（支持动态注入）
$("#app").on("submit", "form", function(e) {
e.preventDefault();
console.log("hi");
// 可选：获取所有字段值
const formData = $(this).serialize();
console.log("Form data:", formData);
});⚠️ 注意事项：
- 不要写 $("form").submit(...) 或 $("#create-submit").click(...) 直接绑定——它们仅作用于当前已存在的元素，对后续 $.get() 注入的内容无效；
- $("#app").on("event", "selector", handler) 是 jQuery 事件委托的标准写法，#app 必须在页面初始化时已存在（你的 HTML 中确实存在）；
- 确保该委托代码在 changeRoute() 触发前执行（即放在 initListener() 中，且在 $(document).ready() 内），无需等待内容注入完成；
- 若需兼容旧版 jQuery，避免使用 .on() 的新语法，但你使用的 jQuery 3.7.1 完全支持。
? 补充建议（非必需但提升健壮性）：
- 为表单显式添加 method="post" 和 action="#"，避免浏览器对无 action 的表单使用默认 GET 行为；
- 在 changeRoute() 成功注入 HTML 后，可额外调用一次事件初始化（但委托方式已天然解决，无需重复）；
- 开发时可用 console.log($("#create-submit").length) 验证元素是否存在，快速定位绑定失败问题。
总结：动态内容场景下，永远优先使用事件委托代替直接绑定。一行修正即可彻底解决 ? 注入与 preventDefault “失效”假象——这不是 jQuery 的 Bug，而是 DOM 生命周期与事件机制的经典协同问题。
