[英]JSF + jQuery : AJAX Rendering forces a re-binding to client side (jQuery) events
This is a repeating issue for me and I have a solution but it is a little messy and i'm wondering if there is a better solution or someway to avoid the problem alltogether. 对我来说,这是一个重复的问题,我有一个解决方案,但这有点混乱,我想知道是否有更好的解决方案,或者总有办法避免该问题。
This issue occurs when I bind from jQuery
to a DOM component and then re-render that component using JSF
/ AJAX
. 当我从jQuery
绑定到DOM组件,然后使用JSF
/ AJAX
重新渲染该组件时,会发生此问题。
For example: 例如:
<h:commandButton>
<f:ajax render="rerenderedObject" />
</h:commandButton>
<h:panelGroup id="rerenderedObject">
...
</h:panelGroup>
And on the jQuery side: 在jQuery方面:
var componentBound = false;
function bindToClick() {
if (componentBound === false) {
componentBound = true;
$('#rerenderedObject').click(function() {
// DO SOMETHING
});
}
}
The binding to click
is lost whenever the rerenderedObject
gets re-rendered (the button is pushed) 每当重新rerenderedObject
(按下按钮)时, click
的绑定都会丢失。
I have managed to overcome this by binding to JSF using this code: 我已经通过使用以下代码绑定到JSF来克服了这个问题:
$(window).load(function () {
jsf.ajax.addOnEvent(function(data){
if (data.status === "success") {
bindToClick();
}
});
});
And yet there exists the problem of multiple event bindings (since not every ajax event re-renders rerenderedObject
) hence the componentBound` variable. 但是仍然存在多个事件绑定的问题(因为并非每个ajax事件都会重新渲染rerenderedObject
),因此存在componentBound`变量。
This is my solution, I was wondering if anyone had to deal with this and what was your solution. 这是我的解决方案,我想知道是否有人要处理这个问题,您的解决方案是什么。
Thanks! 谢谢!
Use jQuery.live()
instead. 使用jQuery.live()
代替。 It'll put a monitor on newly added elements and reapply the same event handler. 它将在新添加的元素上放置一个监视器,然后重新应用相同的事件处理程序。
$('#rerenderedObject').live('click', function() {
// DO SOMETHING
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.