PagedListPager点击触发自定义JavaScript函数无效问题求助

你遇到的点击后仍触发服务端请求的问题，是两个因素共同导致的：

• <a> 标签本身存在默认href跳转行为，点击后会自动向href地址发起GET请求
• 渲染后的a标签带有data-ajax="true"等属性，说明项目引入了jQuery Unobtrusive Ajax库，该库会自动给带该属性的元素绑定点击事件，发起异步服务端请求，仅阻止a标签默认跳转无法拦截该请求

方案1：直接在自定义点击事件中拦截所有默认行为 #

在你的点击监听回调中新增两行拦截逻辑即可，代码如下：

$(document).on("click", "#contentPager a", function (e) {
    // 阻止a标签默认跳转行为
    e.preventDefault();
    // 阻止事件冒泡，避免触发jQuery Unobtrusive Ajax绑定的请求事件
    e.stopImmediatePropagation();

    // 此处写入你的自定义业务逻辑
    // 示例：获取点击的页码 const currentPage = parseInt($(this).text())
});

方案2：从根源移除分页标签的请求属性 #

如果后续都不需要默认的ajax分页能力，可在页面加载完成后直接移除所有分页a标签的请求相关属性，后续绑定点击事件仅需阻止默认跳转即可：

$(function(){
    // 移除所有分页a标签的ajax配置和跳转地址
    $("#contentPager a[data-ajax='true']").removeAttr('data-ajax data-ajax-method data-ajax-mode data-ajax-update href');
})

方案3：服务端生成分页时禁用Ajax属性 #

如果不需要框架自动生成ajax相关配置，可将你现有代码中的@Html.PagedListPager调整为纯静态分页生成逻辑，避免渲染出带data-ajax的标签，后续前端绑定事件逻辑会更简单。

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