至于问题的原因,ajax请求将使用ajax响应中的新HTML元素更新HTML DOM树。这些新的HTML元素确实(显然)没有附加jQuery事件处理程序功能。但是,$(document).ready()
不会在ajax请求上重新执行。您需要手动重新执行它。
这可以通过多种方式来实现。最简单的方法是使用$(document).on(event, selector, function)
而不是$(selector).on(event, function)
。这与文档绑定,并且在匹配给定元素的元素上触发给定时functionRef
,总是调用给eventName
定selector
。因此,您无需再通过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请求完成时重新执行它:
使用oncomplete
PrimeFaces命令按钮的属性:
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>