Yii2 GridView搜索/筛选后行点击事件失效问题及解决方案咨询

为什么搜索/筛选后点击事件失效？ #

你遇到的核心问题是直接事件绑定的局限性。你最初写的$('tbody > tr').click(...)代码，只会给页面首次加载时已经存在的<tr>元素绑定点击事件。而当你执行搜索或筛选操作后，GridView会重新渲染生成新的表格行——这些新的<tr>元素是在你绑定事件之后才创建的，自然没有被绑定点击逻辑，所以点击它们不会有任何响应。

怎么解决？ #

用jQuery的事件委托（Event Delegation）就能完美解决这个问题。事件委托的核心思路是把事件绑定到一个不会被动态替换的父元素上（比如你的<tbody>，只要它在搜索/筛选后不会被重新创建），让父元素监听子元素的点击事件，不管子元素是一开始就存在的，还是后来动态生成的。

修改后的代码如下：

// 将事件委托给tbody，监听内部所有tr的点击
$('tbody').on('click', 'tr', function() {
    const pId = this.id;
    // 建议对pId做URL编码，避免特殊字符导致的问题
    window.location.href = urllink + '&pId=' + encodeURIComponent(pId);
});

补充说明 #

• 事件委托利用了DOM的事件冒泡机制，当你点击<tr>时，事件会向上冒泡到<tbody>，这时jQuery会检查触发事件的目标是否匹配我们指定的'tr'选择器，如果匹配就执行回调函数。
• 如果你不确定<tbody>会不会被替换，可以把事件绑定到更上层的容器（比如GridView的外层div，甚至document），不过推荐尽量绑定到离目标元素最近的稳定父元素，这样性能更好。

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