使用Kaminari分页时jQuery表格行高亮函数失效问题求助

这问题我之前踩过坑！核心症结在于：Kaminari切换分页时，新页面的表格行是动态生成的DOM元素，而你原来的代码只在页面首次加载时，给当时已经存在的<tr>绑定了点击事件——新生成的行根本没这个绑定，自然点击不会触发高亮效果。

给你两个可行的解决方案，优先推荐第一个：

方案1：使用事件委托（最优雅高效） #

把点击事件绑定到静态存在的父元素（比如你的#table-master表格本身），利用事件冒泡机制监听子元素的点击。这样不管是初始的行还是分页后动态加载的行，点击都会触发事件。

修改后的代码如下：

$(document).ready(function() { 
  // 将事件绑定到表格，监听所有子tr的点击
  $("#table-master").on("click", "tr", function() { 
    var selected = $(this).hasClass("highlight"); 
    $("#table-master tr").removeClass("highlight"); 
    if (!selected) $(this).addClass("highlight"); 
  }); 
});

原理很简单：事件委托不会直接给每个<tr>绑事件，而是让父元素“监听”子元素的点击行为，不管子元素是一开始就有还是后来动态添加的，只要点击发生，事件会冒泡到父元素，然后触发我们写的处理逻辑。

方案2：分页切换后重新绑定事件 #

如果你的项目里Kaminari是通过AJAX加载分页内容的，可以在分页请求完成后，重新执行一次行高亮的绑定逻辑。这种方法需要你找到分页切换的触发时机：

// 封装高亮绑定逻辑为函数
function setupRowHighlight() {
  // 先移除旧的绑定，避免重复触发
  $("#table-master tr").off("click");
  // 重新绑定点击事件
  $("#table-master tr").click(function() { 
    var selected = $(this).hasClass("highlight"); 
    $("#table-master tr").removeClass("highlight"); 
    if (!selected) $(this).addClass("highlight"); 
  }); 
}

// 页面加载时初始化
$(document).ready(setupRowHighlight);

// 分页链接点击完成后，重新初始化
// 这里的事件选择器需要根据你Kaminari生成的分页HTML调整
$(document).on("ajax:success", ".pagination a", function() {
  setupRowHighlight();
});

不过这个方案不如事件委托简洁，因为需要手动处理分页的回调时机，而且每次分页都要重新绑定事件，效率略低。

总结 #

优先选事件委托的方案，代码改动小，而且一劳永逸解决动态元素的事件绑定问题。

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