使用jQuery preventDefault仍出现URL带?且表单提交事件失效求助

• 问题本质：你用静态绑定方式给按钮加点击事件，但动态注入的表单元素在绑定代码执行时还不存在于DOM中，导致事件根本没挂载到按钮上。此时点击按钮会触发表单默认提交行为，页面刷新、URL出现?，而你的console.log("hi")因为事件未触发自然不会执行。静态写入表单时正常，是因为静态元素在DOM加载完成后就存在，绑定代码能找到目标元素。

• 解决方案（保留原有监听逻辑）：改用事件委托，把事件绑定到已经存在的父容器（比如你用的#app）上，这样不管子元素什么时候动态生成，点击事件都会被父容器捕获并触发你的逻辑：

  // 替换原有按钮点击监听代码
  $('#app').on('click', 'button[type="submit"]', function(e) {
    e.preventDefault(); // 阻止默认提交行为
    console.log("hi");
    // 你的其他表单处理逻辑
  });
  

  若不确定父容器稳定性，也可绑定到document上（范围更广）：

  $(document).on('click', 'button[type="submit"]', function(e) {
    e.preventDefault();
    console.log("hi");
    // 你的其他逻辑
  });
  

• 额外注意事项：

  • 确保事件委托代码在DOM加载完成后执行，比如包裹在$(document).ready(function() { ... })里，避免父容器未加载就绑定事件。
  • 若表单是异步注入（如AJAX获取后插入），无需重新绑定事件，事件委托会自动生效。

内容的提问来源于stack exchange，提问作者jdbj