首頁猿問 JSF / PrimeFaces...

JSF / PrimeFaces Ajax更新中斷了jQuery事件偵聽器功能綁定

JavaScript JQuery

夢里花落0921 2019-11-20 10:57:00

我正在使用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如果用戶更改的內(nèi)容，則會觸發(fā)這兩個事件myTextarea。但是，在按下update按鈕（部分更新）之后myTextarea，只有changeHandler之后才觸發(fā)。綁定的事件$(document).ready()不再觸發(fā)。這是PrimeFaces相關(guān)和/或預(yù)期的行為嗎？如果是，那么我如何確保觸發(fā)第二個事件而無需再次運行文檔就緒腳本。

查看完整描述

2 回答

楊__羊羊

TA貢獻(xiàn)1943條經(jīng)驗獲得超7個贊

至于造成問題的原因，ajax請求將使用ajax響應(yīng)中的新HTML元素更新HTML DOM樹。這些新的HTML元素確實（顯然）沒有附加jQuery事件處理程序功能。但是，$(document).ready()不會在ajax請求上重新執(zhí)行。您需要手動重新執(zhí)行它。

這可以通過多種方式來實現(xiàn)。最簡單的方法是使用$(document).on(event, selector, function)而不是$(selector).on(event, function)。這與文檔相關(guān)聯(lián)，并且在匹配給定的元素上觸發(fā)給定時functionRef，總是會調(diào)用給eventName定selector。因此，您無需通過JSF方式顯式重新執(zhí)行該功能。

$(document).on("change", ":input", function() {

console.log("From change event on any input: " + this.id);

});

另一種方法是在完成ajax請求后自己明確地重新執(zhí)行該函數(shù)。這是當(dāng)您真正有興趣在ready/ load事件期間立即執(zhí)行該函數(shù)時的唯一方法（例如，直接應(yīng)用某些插件特定的行為/外觀，例如日期選擇器）。首先，您需要將$(document).ready()作業(yè)重構(gòu)為可重用的函數(shù)，如下所示：

$(document).ready(function(){

applyChangeHandler();

});

function applyChangeHandler() {

$(":input").on("change", function() {

console.log("From applyChangeHandler: " + this.id);

});

}

（請注意，我刪除并簡化了您完全不必要的$.each()方法）

然后，選擇以下方式之一以在ajax請求完成時重新執(zhí)行它：

使用oncompletePrimeFaces命令按鈕的屬性：

oncomplete="applyChangeHandler()"

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

<h:outputScript id="applyChangeHandler" target="body">

applyChangeHandler();

</h:outputScript>

并在update屬性中引用它：

update=":applyChangeHandler"

用于<p:outputPanel autoUpdate="true">在每個ajax請求上自動更新它：

<p:outputPanel autoUpdate="true">

<h:outputScript id="applyChangeHandler">

applyChangeHandler();

</h:outputScript>

</p:outputPanel>

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

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

反對回復(fù) 2019-11-20

郎朗坤

TA貢獻(xiàn)1921條經(jīng)驗獲得超9個贊

感謝您的發(fā)布?？磥淼谌x擇適合我的用例。我打算將該代碼塊放入facelet模板中。對于第三種方式，我刪除了$（document）.ready（function（）{}，否則在初始頁面加載時該處理程序被注冊了兩次，然后將autoUpdatable p：outputPanel手動置于正文的末尾。我自己實現(xiàn)Omnifaces已經(jīng)提供的功能，肯定會嘗試一下。:)

反對回復(fù) 2019-11-20