您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

JSF / PrimeFaces Ajax更新中断了jQuery事件侦听器功能绑定

JSF / PrimeFaces Ajax更新中断了jQuery事件侦听器功能绑定

至于问题的原因,ajax请求将使用ajax响应中的新HTML元素更新HTML DOM树。这些新的HTML元素确实(显然)没有附加jQuery事件处理程序功能。但是,$(document).ready()不会在ajax请求上重新执行。您需要手动重新执行它。

这可以通过多种方式来实现。最简单的方法是使用$(document).on(event, selector, function)而不是$(selector).on(event, function)。这与文档绑定,并且在匹配给定元素的元素上触发给定时functionRef,总是调用eventNameselector。因此,您无需再通过JSF方式显式重新执行该功能

$(document).on("change", ":input", function() {
    console.log("From change event on any input: " + this.id);
});

另一种方法是在ajax请求完成后自己显式重新执行该函数。当您真正有兴趣在ready/load事件期间立即执行该功能时,这是唯一的方法(例如,直接应用某些插件特定的行为/外观,例如日期选择器)。首先,您需要将$(document).ready()作业重构为可重用的函数,如下所示:

$(document).ready(function(){
    applyChangeHandler();
});

function applyChangeHandler() {
    $(":input").on("change", function() {
        console.log("From applyChangeHandler: " + this.id);
    });
}

(请注意,我删除并简化了您完全不必要的$.each()方法

然后,选择以下方式之一以在ajax请求完成时重新执行它:

使用oncompletePrimeFaces命令按钮的属性

oncomplete="applyChangeHandler()"

使用<h:outputScript target="body">代替$(document).ready()

<h:outputScript id="applyChangeHandler" target="body">
applyChangeHandler();

并在update属性中引用它:

    update=":applyChangeHandler"

用于<p:outputPanel autoUpdate="true">在每个ajax请求上自动更新它:

<p:outputPanel autoUpdate="true">
<h:outputScript id="applyChangeHandler">
    applyChangeHandler();
</h:outputScript>

使用OmniFaces<o:onloadScript>代替$(document).ready()<h:outputScript>全部用于em。

<o:onloadScript>applyChangeHandler();</o:onloadScript>
JS 2022/1/1 18:13:51 有722人围观

撰写回答


你尚未登录,登录后可以

和开发者交流问题的细节

关注并接收问题和回答的更新提醒

参与内容的编辑和改进,让解决方法与时俱进

请先登录

推荐问题


联系我
置顶