Yii框架CGridView中select的change事件仅触发一次求助

我之前处理过一模一样的场景，这问题的核心原因是Yii的CGridView在执行筛选操作时，会通过AJAX重新渲染表格区域——你最初直接绑定在select[name="Vendor"]上的事件，会随着原DOM元素被新渲染的元素替换而失效，自然第二次切换就没反应了。

解决方案：用事件委托（Event Delegation）解决动态元素绑定问题 #

我们可以把事件绑定到一个不会被AJAX替换的父元素上（比如你定义的GridView容器#user-master-grid），利用事件冒泡的机制，来捕获动态生成的select元素的change事件。

修改你的JavaScript代码如下：

jQuery(document).ready(function($) {
    // 把事件绑定到稳定的GridView容器上，监听子select元素的change事件
    $('#user-master-grid').on('change', 'select[name="Vendor"]', function(){
        var selectedValue = $(this).val();
        alert("Selected Text: " + selectedValue);
        if(this.value == 2){
            $('.grid_data').show();
            $('.grid_data_rel').hide(); // 记得隐藏另一个区块，避免重复显示
        }else{
            $('.grid_data_rel').show();
            $('.grid_data').hide();
        }
    });
});

为什么这种方式能解决问题？ #

• 事件委托把事件绑定到了不会被AJAX刷新影响的父容器上，这个容器的DOM节点自始至终不会被替换。
• 当select元素触发change事件时，事件会向上冒泡到父容器，父容器再处理这个事件——不管这个select是页面初始加载的，还是AJAX动态生成的，都能被正常捕获到。

额外的细节优化 #

1. 一定要在显示目标区块的同时隐藏另一个，否则多次切换后两个区块会同时显示，影响页面逻辑。
2. 恢复document.ready包裹代码，确保DOM完全加载完成后再绑定事件，避免绑定时机过早导致的问题。
3. 确认你选择的父容器确实是稳定的，这里#user-master-grid是你定义的GridView的ID，完全符合要求。

内容的提问来源于stack exchange，提问作者Sandip Sanghani