为何jQuery中绑定submit事件后仍出现页面跳转？

看起来你的e.preventDefault()没生效，大概率是这几个常见原因导致的，咱们一个个排查：

• DOM加载时机不对：如果你的代码是在页面DOM还没完全渲染完成时执行的，那$('#id')根本找不到目标表单元素，事件自然绑定不上。解决办法是把代码包裹在$(document).ready()里，确保DOM加载完成后再绑定事件：

$(document).ready(function() {
  $('#id').on('submit', function(e) {
    e.preventDefault();
    // 你的其余代码...
  });
});

• 表单选择器错误：先检查表单的id是不是真的叫id？别是拼写错误（比如实际表单id是form-submit，你写成了#id），或者选择器选错了元素（比如选了按钮而非表单）。可以在浏览器控制台输入$('#id')，如果返回空数组，那就是选择器的问题。

• JS报错导致函数中断：打开浏览器控制台（F12）看看有没有报错，比如clicksCounter或id变量未定义——这种错误会直接中断函数执行，哪怕e.preventDefault()在第一行，只要函数触发前有报错，整个逻辑就走不下去。

• 事件被覆盖或绕过：如果表单里的提交按钮绑定了独立的click事件，并且在里面手动调用了form.submit()，这种情况下会绕过你绑定的表单submit事件。可以试试把按钮type改成button，或者在按钮的click事件里也加上阻止默认行为的逻辑。

另外，你可以在表单提交函数开头加一行console.log('触发提交事件了')，如果控制台没输出，说明事件根本没绑定上；如果有输出但还是跳转，那可能是e.preventDefault()之后的代码里有触发跳转的逻辑（比如误写了location.href之类的）。

给你一个修正后的完整示例，确保逻辑闭环：

$(document).ready(function() {
  // 先确保变量有定义
  let clicksCounter = 0;
  const id = '你的实际ID值'; 

  $('#id').on('submit', function(e) {
    e.preventDefault(); // 第一行就锁定阻止跳转
    console.log('表单提交事件已触发');
    
    clicksCounter++;
    $.ajax({
      type: 'POST',
      data: { 
        id: id, 
        clickCounter: clicksCounter > 1 
      },
      url: '你的接口地址',
      success: function(response) {
        if (response) {
          $('#modal').modal('hide');
        }
      },
      error: function(xhr, status, error) {
        // 加上错误处理，方便排查问题
        console.error('AJAX请求出错:', error);
      }
    });
  });
});

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