PrimeFaces页面Poll更新后JavaScript行切换脚本停止运行求助

嘿，这个问题我之前也踩过坑！本质原因是PrimeFaces的AJAX更新会替换页面中的DOM元素，而你用$(document).ready()绑定的脚本只会在页面首次加载时执行一次——更新后生成的新元素根本没被绑定上事件，所以脚本就“罢工”了。下面给你两种靠谱的解决办法：

方法1：用jQuery事件委托（推荐） #

把事件绑定到一个不会被AJAX替换的父元素上（比如document或者页面固定的外层容器），通过事件冒泡机制捕获新元素的事件。这样不管AJAX怎么更新DOM，只要元素匹配选择器，事件就会正常生效。

假设你原来的脚本是这样绑定行切换逻辑的：

$(document).ready(function() {
    $('.row-switch-btn').click(function() {
        // 你的行切换逻辑
        $(this).closest('tr').toggle();
    });
});

改成事件委托的写法：

// 不用包在$(document).ready里也能生效，包进去也没问题
$(document).on('click', '.row-switch-btn', function() {
    // 你的行切换逻辑
    $(this).closest('tr').toggle();
});

这种方式一劳永逸，不管是Poll还是其他AJAX组件更新DOM，事件都会正常触发，比第二种方法更高效。

方法2：利用PrimeFaces的AJAX回调 #

如果只需要针对Poll组件的更新，可以给Poll加上oncomplete属性，让它每次更新完成后重新执行你的脚本。

首先把行切换逻辑封装成独立函数：

function initRowSwitch() {
    // 先解绑旧事件（避免重复绑定导致多次触发），再绑定新事件
    $('.row-switch-btn').off('click').on('click', function() {
        $(this).closest('tr').toggle();
    });
}

// 页面首次加载时执行一次
$(document).ready(function() {
    initRowSwitch();
});

然后修改你的Poll组件，添加oncomplete调用这个函数：

<p:poll interval="10" update="your-target-component" oncomplete="initRowSwitch()" />

这样每次Poll完成AJAX更新后，都会重新给新生成的DOM元素绑定事件。

选哪种方法看你的场景：如果页面上有多个AJAX操作都会更新相关DOM，优先用方法1；如果只有Poll这一个更新源，方法2也能轻松搞定。

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