MVCGrid.Net分页时jQuery点击事件注销问题求助

这个问题真的太普遍了！我自己做项目的时候也踩过这个坑😅

问题原因 #

你在document ready里绑定的点击事件，只会对页面加载时已经存在于DOM中的网格元素生效。当你切换分页后，新的网格行是动态生成并添加到页面中的，这些新元素并没有被绑定初始的点击事件，所以点击就没反应了。

两种解决方案 #

方案1：事件委托（最优解）

事件委托是利用DOM事件冒泡的特性，把点击事件绑定到一个始终存在的父容器上（比如整个表格的容器、<table>标签本身，甚至document），然后通过判断触发事件的目标元素是不是你需要的网格项来执行逻辑。这样不管后续怎么动态添加新的网格元素，事件都会正常触发。

举个代码例子：

// 原来的绑定方式（只对初始元素生效）
// $('.grid-item').click(function() { /* 你的逻辑 */ });

// 改成事件委托的方式
$('#grid-wrapper').on('click', '.grid-item', function() {
  // 这里写你的点击事件逻辑，比如获取当前行数据
  const rowData = $(this).data('row-id');
  console.log('点击了行：', rowData);
});

这里#grid-wrapper是页面加载时就存在的父容器，.grid-item是你要点击的网格元素选择器。这种方式一劳永逸，不用管分页切换的逻辑。

方案2：分页完成后重新绑定事件

如果你的分页插件有“分页完成”的回调钩子，或者你自己控制分页的逻辑，可以在新页面的网格数据加载完成后，重新执行一遍事件绑定的代码。注意要先解绑旧的事件，避免重复绑定导致多次触发。

比如：

// 假设你的分页切换按钮点击逻辑
$('.pagination-next').click(function() {
  // 加载下一页数据的异步请求
  $.get('/api/get-next-page', function(data) {
    // 把新数据渲染到网格里
    $('#grid-wrapper').html(data);
    
    // 重新绑定点击事件（先解绑再绑定）
    $('.grid-item').off('click').on('click', function() {
      // 你的点击逻辑
    });
  });
});

总结 #

优先选事件委托的方式，代码更简洁高效，也不用维护分页后的事件绑定逻辑。如果实在因为项目限制要用第二种方法，记得一定要先解绑旧事件哦！

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