jQuery DataTable分页后点击链接无法正常加载Partial View问题

这个问题其实是jQuery DataTable动态渲染元素导致的事件绑定失效，我来给你一步步解决：

核心原因 #

DataTable的分页功能是动态生成后续页面的DOM元素的，你一开始写的点击事件只绑定在了页面首次加载时存在的链接上。当切换到第二页及以后，新生成的链接并没有绑定原来的模态框触发事件，所以点击后就会直接发起普通的GET请求，返回Partial View的源码，而不是通过AJAX加载到模态框里。

具体修复步骤 #

1. 改用事件委托绑定点击事件 #

把原来的直接绑定事件改成事件委托，绑定到一个始终存在的父元素（比如document或者DataTable的容器），这样动态生成的元素也能触发事件。

假设你原来的JS代码是这样的：

$('[data-modal]').click(function(e) {
    e.preventDefault();
    // 加载模态框的逻辑
});

修改成这样：

// 绑定到document，确保所有动态生成的[data-modal]链接都能触发
$(document).on('click', '[data-modal]', function(e) {
    e.preventDefault(); // 阻止默认的跳转行为
    var requestUrl = $(this).attr('href');
    
    // 通过AJAX请求加载Partial View
    $.get(requestUrl, function(responseData) {
        // 假设你有一个模态框容器，比如<div id="modalContent"></div>
        $('#modalContent').html(responseData);
        // 如果用的是Bootstrap模态框，显示它
        $('#modalContent').modal('show');
    });
});

2. 确认Partial View的设置 #

检查你的Partial View文件顶部，确保没有强制指定Layout，比如不要有这样的代码：

@{ Layout = "~/Views/Shared/_Layout.cshtml"; }

Partial View默认是不使用Layout的，这部分你当前的控制器代码return PartialView();已经处理好了，只要Partial View本身没设置Layout就没问题。

3. 验证动态生成的链接属性 #

切换到DataTable的后续页面，查看页面元素（右键→检查），确认新生成的链接依然带有data-modal属性，应该是类似这样的结构：

<a href="/Controller/KsiazkiZlecenia?zlecKompletID=xxx&magazynID=yyy" data-modal="">Książki</a>

如果这个属性丢失了，那要检查DataTable的渲染逻辑，确保ActionLink的data-modal属性被正确渲染。

这样修改后，不管切换到哪一页，点击链接都会通过AJAX加载Partial View到模态框里，而不会直接跳转返回源码了。

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