0

所以我有一个自定义加载动画，它使用模态来阻止 UI。我还使用 jquery 对话框来通知用户确认或某些事件。

我遇到的问题是我需要在他们单击 jquery 对话框上的“确认”按钮后立即执行 ajax 请求，每当我执行任何 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');

}

4

1 回答 1

1

当您的 ajax 调用返回时，您需要在回调中执行销毁/删除。例如

$.ajax('/some/url')
    .done(function(response){
        $dialog.dialog('destroy').remove();
    });
于 2013-01-11T18:38:07.350 回答