JSF/PrimeFaces ajax更新破坏了jQuery事件监听器函数绑定

Question

我正在使用jQuery为HTML中的change每一个注册一个事件监听器,input如下所示:

<h:head>
    <script type="text/javascript">
        //<![CDATA[
        $(document).ready(function(){
            $(':input').each(function() {
                $(this).change(function() {
                    console.log('From docReady: ' + this.id);
                });
            });
        });

        function changeHandler() {
            console.log("from changeHandler");
        }
        //]]>
    </script>
</h:head>
<h:body>
    <h:form id="topForm">
        <p:commandButton id="myButton" value="update"
                         action="#{testBean.submit}"
                         partialSubmit="true" process=":myForm:panel"
                         update=":myForm:panel" />
    </h:form>
    <h:form id="myForm">
        <p:panel id="panel">
            <p:inputTextarea id="myTextarea"
                             value="#{testBean.val}"
                             onchange="changeHandler();"/>
        </p:panel>
    </h:form>
</h:body>

change如果用户更改了内容,则会触发这两个事件myTextarea.但是,在按下部分更新的更新按钮后myTextarea,只有changeHandler会在之后触发.绑定的事件$(document).ready()不再触发.

这是PrimeFaces相关和/或预期的行为？如果是,那么如何在不重新运行文档就绪脚本的情况下确保触发第二个事件.

Answer 1

至于问题的原因,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/ loadevent 期间立即执行函数时(例如直接应用某些特定于插件的行为/ look'n'feel,例如日期选择器),这将是唯一的方法.首先,您需要将$(document).ready()作业重构为可重用的函数,如下所示:

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

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

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

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

1. 使用oncompletePrimeFaces命令按钮的属性:

   oncomplete="applyChangeHandler()"
   

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

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

   并在update属性中引用它:

   update=":applyChangeHandler"
   

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

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

4. 使用OmniFaces <o:onloadScript>代替$(document).ready(),<h:outputScript>和所有他们.

   <o:onloadScript>applyChangeHandler();</o:onloadScript>