jQuery中e.preventDefault()失效，图片分页表单提交仍刷新页面

我开发了图片画廊的分页功能，C#控制器中的分页方法已完成，但点击下一页按钮会触发整页刷新。尝试用jQuery实现图片画廊的局部更新，却发现点击提交按钮时e.preventDefault()似乎被忽略，表单仍会刷新页面，且JS文件中其他功能均正常运行。

提交表单代码： #

<form action="~/Home/pagination" method="post" id="ajax_submit_next">
         <button id="btnNext" value="@item.getNumeroEntrega()" type="submit">
               Siguiente
          </button>
</form>

jQuery代码： #

$("#ajax_submit_next").submit(function (e) {
  e.preventDefault();
     console.log("prevent Default");

    var data = {
        'paginacion': 'siguiente',
        'entrega': $("#btnNext").val()
    }
    console.log(data)

    $.ajax({

        url: '/Home/pagination/',
        type: 'POST',
        data: data,
        success: function (result) {
            console.log(result);
        },
        error: function (err) {
            console.log(err);
        }
    });
})

可能的原因及解决方案： #

• 事件绑定时机错误：如果JS代码在DOM元素渲染前执行，#ajax_submit_next表单还未被加载，导致事件绑定失败。
  解决：将代码包裹在$(document).ready()中，确保DOM加载完成后再绑定事件：

  $(document).ready(function() {
      $("#ajax_submit_next").submit(function (e) {
          e.preventDefault();
          // 原有逻辑代码
      });
  });
  

  或者使用事件委托，兼容动态生成的表单：

  $(document).on('submit', '#ajax_submit_next', function(e) {
      e.preventDefault();
      // 原有逻辑代码
  });
  

• 页面存在重复ID：如果页面中有多个id="ajax_submit_next"的表单，事件只会绑定到第一个匹配元素，其他表单仍会默认提交。
  解决：检查页面DOM结构，确保表单ID唯一。

• 事件被其他代码覆盖：其他JS代码可能重新绑定了表单的submit事件，或者在e.preventDefault()之后调用了form.submit()等强制提交的逻辑。
  解决：在浏览器控制台执行getEventListeners(document.getElementById('ajax_submit_next'))（Chrome浏览器），查看绑定的所有事件，排查冲突代码。

• jQuery版本兼容问题：部分旧版jQuery对e.preventDefault()的处理存在差异，可尝试用return false替代（注：return false等同于e.preventDefault() + e.stopPropagation()）：

  $("#ajax_submit_next").submit(function (e) {
      // e.preventDefault();
      console.log("prevent Default");
      // 原有逻辑代码
      return false;
  });
  

• 按钮类型或表单逻辑替代：可以将按钮type改为button，直接在点击事件中处理AJAX请求，绕开表单提交逻辑：

  <button id="btnNext" value="@item.getNumeroEntrega()" type="button">
      Siguiente
  </button>
  

  对应的jQuery代码：

  $("#btnNext").click(function() {
      var data = {
          'paginacion': 'siguiente',
          'entrega': $(this).val()
      };
      // AJAX请求逻辑
  });
  

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