如何正确阻止表单提交并避免 URL 中出现问号（?）-html教程-PHP中文网

如何正确阻止表单提交并避免 URL 中出现问号（?）

使用 preventDefault() 时，若事件监听器未在 DOM 加载完成后正确绑定（尤其是对动态注入的 HTML），会导致默认提交行为未被拦截，从而触发页面重载、URL 中插入 ? 并跳转至 /#create 前的空查询参数位置。核心在于事件委托缺失与监听时机不当。

使用 `preventdefault()` 时，若事件监听器未在 dom 加载完成后正确绑定（尤其是对动态注入的 html），会导致默认提交行为未被拦截，从而触发页面重载、url 中插入 `?` 并跳转至 `/#create` 前的空查询参数位置。核心在于事件委托缺失与监听时机不当。

你遇到的问题——点击提交按钮后 URL 变为 www.webpage.com/?#create，且控制台未输出 "hi"——并非 preventDefault() 失效，而是事件监听器根本未成功绑定到动态注入的 DOM 元素上。

原因分析如下：
你的 initListener() 函数在 $(document).ready() 中执行，此时

尚未存在（它由 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 事件（推荐，语义更准确）：

jQuery金融借款单提交表单

jQuery金融借款单提交表单，包含出借金额和日期的选择，且自动计算利息，非常的简单方便。

下载

// ✅ 推荐：监听 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 完全支持。

? 补充建议（非必需但提升健壮性）：