JSF / PrimeFaces AJAX更新打破jQuery的事件侦听器的功能绑定 [英] JSF/PrimeFaces ajax updates breaks jQuery event listener function bindings

问题描述

我注册一个变更事件侦听器每个输入在HTML使用jQuery如下：

I am registering a change event listener for every input in the HTML using jQuery as below:

<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>

两个变更事件正在如果用户更改 myTextarea 的内容触发。然而$ P $后pssing更新按钮，这部分更新 myTextarea ，只有changeHandler随后被触发。绑定在 $（文件）的事件。就绪（）未触发了。

Both change events are being triggered if the user changes the content of myTextarea. However after pressing the update button, which partially updates the myTextarea, only the changeHandler is triggering afterwards. The event bound in $(document).ready() is not triggering anymore.

有关这种PrimeFaces和/或预期的行为？如果是的话那我怎么才能保证触发第二个事件，而无需再次重新运行文件准备脚本。

Is this PrimeFaces related and/or an expected behavior? If yes then how can I ensure to trigger the second event without rerunning document ready script again.

推荐答案

至于你的问题的原因，Ajax请求将更新与Ajax响应新的HTML元素的HTML DOM树。这些新的HTML元素做＆mdash;＆明显mdash;没有连接jQuery的事件处理函数。但是， $（文件）。就绪（）未在Ajax请求重新执行。您需要手动重新执行它。

As to the cause of your problem, the ajax request will update the HTML DOM tree with new HTML elements from the ajax response. Those new HTML elements do —obviously— not have the jQuery event handler function attached. However, the $(document).ready() isn't re-executed on ajax requests. You need to manually re-execute it.

这可以以各种方式来实现。最简单的方法是使用 $（文件）。在（活动，选择，功能）而不是 $（选择）。在（事件，函数）。这是联系在一起的文件，并给定 functionRef 总是被调用时给定的 eventName的被触发匹配元素的鉴于选择。所以，你永远需要明确地JSF方式重新执行功能。

This can be achieved in various ways. The simplest way is to use $(document).on(event, selector, function) instead of $(selector).on(event, function). This is tied to the document and the given functionRef is always invoked when the given eventName is triggered on an element matching the given selector. So you never need to explicitly re-execute the function by JSF means.

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

---

另一种方法是，明确地重新执行该功能对自己完全的Ajax请求。这将是唯一的出路，当你真正感兴趣的，立即就绪 / 负荷活动期间执行功能（如直接申请一些插件特定的行为/ look'n'feel，如日期选择器）。首先，你需要重构 $（文件）。就绪（）工作变成一个可重用的功能如下：

---

The alternative way is to explicitly re-execute the function yourself on complete of ajax request. This would be the only way when you're actually interested in immediately execute the function during the ready/load event (e.g. to directly apply some plugin specific behavior/look'n'feel, such as date pickers). First, you need to refactor the $(document).ready() job into a reusable function as follows:

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

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

（注意，我删除，并简化您完全没有必要 $。每（）办法）的

(note that I removed and simplified your completely unnecessary $.each() approach)

然后，选择下列方式对完整的Ajax请求重新执行中的一个：

Then, choose one of the following ways to re-execute it on complete of ajax request:

1. 使用的PrimeFaces的的onComplete 属性命令按钮：

oncomplete="applyChangeHandler()"

使用＆LT; H：outputScript目标=体与GT; 而不是 $（文件）。就绪（），

Use <h:outputScript target="body"> instead of $(document).ready(),

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

和引用它的更新属性：

update=":applyChangeHandler"

使用＆LT;电话号码：outputPanel自动更新=真正的＆GT; 来自动在每一个Ajax请求更新：

Use <p:outputPanel autoUpdate="true"> to auto update it on every ajax request:

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

使用 OmniFaces 的 ＆LT;○：onloadScript＆GT; 而不是 $（文件）。就绪（），＆LT; H：outputScript＆GT; 和所有EM

Use OmniFaces <o:onloadScript> instead of $(document).ready(), <h:outputScript> and all on em.

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

这篇关于JSF / PrimeFaces AJAX更新打破jQuery的事件侦听器的功能绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！