2013-01-11 165 views
0

所以我有一个使用模态来阻止UI的自定义加载动画。我也使用jQuery对话框通知用户确认或某些事件。处理JQuery删除事件

我遇到的问题是,我需要做一个ajax请求后,他们单击jquery对话框上的“确认”按钮,每当我做任何ajax请求,我开始加载动画。但是,当我销毁并删除对话框并运行ajax请求时,事件冒泡发生的方式会让事情变得糟糕。即使我在提交事务之前有.dialog(“destroy”)。remove(),它也会执行销毁并在事务代码发生后删除。当它确实消除了我在屏幕上的所有模态时,实质上关闭了我的加载动画并允许用户做他们想做的任何事情。

我把一个计时器,它可以工作,但我不喜欢用计时器来处理这个。我想知道是否有其他方法来处理这个问题?

我还补充一点,我支持ie8这个。

的代码是那种无关,因为潜在的问题是,这样做的破坏和删除似乎在事件队列的底部放,但这里的要点是:

var elem = $("#" + ctx.id); 
var button = $("#btn-confirm"); 
button.bind("click", function() { 
    elem.dialog("destroy").remove(); 
    validateEntry = ValidateEntry.getInstance(); 
    validateEntry.callback = new ValidateEntryHandler(this.content); 
    validateEntry.submit(); 
} 

....

// There is inheritance for the transaction class for each service. 
submit = function() { 
app.loadAnim.start(); 
    $.ajax({ 
     type: 'POST', 
     url: this.getApi_path(), 
     data: req, 
     contentType: 'application/xml; charset=utf-8', 
     dataType: "xml", 
     async: ctx.async, 
     timeout: ctx.getService_timeout(), 
     success: function(xml) 
     { 
      if(typeof ctx.returnXML === "undefined"){ 
       ctx.submitHandler(req, JsonixUtil.jsonixUnmarshaller(xml, ctx.jsonixKey)); 
      } 
      else{ 
       ctx.submitHandler(req, xml); 
      }   
     }, 
     error: function(response, strError) 
     { 
      ctx.callback.onFailure(response); 
     } 
    }); 
} 

....

//Load animation start code 
start: function(dotDelay, textDelay){ 
    //set array of images   
    var ss = $('.sliding-dots').children('img');   
    var ssize = ss.size(); 
    var anim = this; 
    if(!this.isShowing){ 
     this.isShowing = true; 
     this.dotTimer = setInterval(function() {     
     for(var i = 0; i < anim.dots.length; i++){ 
      anim.alpha = 1 - Math.abs(anim.currImg-i)*.25; 
      anim.alpha = (anim.alpha > 0) ? anim.alpha : 0; 
       $(ss[i]).css('opacity',anim.alpha); 
      } 
     anim.currImg = (anim.currImg == anim.dots.length-1) ? 0 : anim.currImg+1; 
    }, this.dotDelay); 
    $('.load-animation').fadeIn('slow'); 
    $('.load-animation .text-body').css({opacity: 0}).delay(this.textDelay).animate({opacity: 1}, 'slow'); 

}

+3

请分享您的代码吗? – Blazemonger

回答

1

当您的ajax调用返回时,您需要在回调中进行销毁/删除操作。例如

$.ajax('/some/url') 
    .done(function(response){ 
     $dialog.dialog('destroy').remove(); 
    }); 
+0

这会消除应用程序的一致性,因为大多数弹出窗口会关闭,然后会发生加载动画。在服务调用之后还会有另一个服务调用,所以同样的事情会再次发生。 –