如何解决Ajax失败后重新绑定当前功能?
| 我有一个使用live()绑定的函数:$(\'.wink-back\').live( \"click\",function( event ) {
var uid = $(this).attr(\"rel\");
$(this).die( \"click\" ).addClass(\"disabled\");
$.ajax({
type : \"POST\",cache : false,data : \"data[Wink][recipient_id]=\" + uid,url : \"/winks/sendWink\",success : function( data ) {
var newData = JSON.parse( data );
if ( newData.Message.code == 200 ) { // success
} else { // failure
// rebind function here
}
}
});
});
我正在使用.die()在第一次单击时从该元素取消绑定所有实时事件,但是如果AJAX请求返回一个错误代码(<200),则需要将整个代码块重新绑定到该元素。
我将如何完成?我基本上需要恢复绑定。
问候,
巴里
解决方法
编辑从jQuery 1.7开始,对事件做出反应的推荐方法是
.on()
。
只是在确定不再需要绑定之前,不要删除它们。
$(\'.wink-back\').on(\"click\",function( event ) { // jQuery >= 1.7
// $(\'.wink-back\').live(\"click\",function( event ) { // jQuery < 1.7
var $this = $(this);
var uid = $this.attr(\"rel\");
if (!$this.hasClass(\"disabled\")) {
$this.addClass(\"disabled\");
$.ajax({
type : \"POST\",cache : false,data : \"data[Wink][recipient_id]=\" + uid,url : \"/winks/sendWink\",success : function( data ) {
var newData = JSON.parse( data );
if ( newData.Message.code == 200 ) { // success
$this.off(\"click\"); // jQuery >= 1.7
// $this.die(\"click\"); // jQuery < 1.7
} else {
$this.removeClass(\"disabled\");
}
}
});
}
});
, 可以这么说,看来您快要死了。确定Ajax请求实际上已成功之后,删除click事件绑定是否更有意义?
$(\'.wink-back\').live( \"click\",function( event ) {
var uid = $(this).attr(\"rel\");
$.ajax({
type : \"POST\",success : function( data ) {
$(this).die( \"click\" ).addClass(\"disabled\");
var newData = JSON.parse( data );
}
});
});
考虑到您的问题本质上是您希望在单击链接后立即阻止多个Ajax请求,因此jQuery提供了许多可以为任何Ajax操作制定的全局Ajax事件处理程序。
关于您的特定问题,您希望在每次启动新的Ajax请求时都禁用单击的链接,并假设请求成功,则删除该元素的click事件绑定。
这是您的操作方式。
首先,我们将为任何Ajax请求设置两个全局事件侦听器,以便我们可以禁用UI,直到操作完成为止。一个用于Ajax请求何时启动,另一个用于何时完成:
$(\'#my-Element-Containing-All-WinkBack-Class-Elements\').ajaxStart(function() {
// Show an overlay over the whole page or
// over your element containing your links with
// opacity 0 so that any elements cannot be clicked.
}).ajaxStop(function() {
// Remove the overlay
});
因此,我们在这里正在侦听任何启动请求。一旦开始,我们会通过使用以下几行使用CSS添加透明的叠加层来防止对该页面(或其他页面区域-根据需要)的进一步点击:
.page-overlay {
z-index: 10000;
filter: alpha(opacity=0); /*older IE*/
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0); /* IE */
-khtml-opacity: 0; /*older Safari*/
opacity: 0; /*supported by current Mozilla,Safari,and Opera*/
position: absolute; top:0; left:0; width:100%; height:100%; color:#FFFFFF; text-align:center; vertical-align:middle;
}
通过在.ajaxStop()方法中删除此覆盖层,请求完成后即可重新启用您的页面。
实际的点击事件绑定已按照我的建议进行处理。
, 使用下面的功能来防止多个ajax请求。
jQuery(\'a.\' + selectedTab + \'-list-page\').die();
jQuery(\'a.\' + selectedTab + \'-list-page\').live(\'click\',function() {
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。