핸들 JQuery 이벤트 제거

Question

UI를 차단하는 모달을 사용하는 사용자 지정 애니메이션로드가 있습니다. jquery 대화 상자를 사용하여 사용자에게 확인 또는 특정 이벤트를 알립니다.

내가 겪고있는 문제는 jQuery 대화 상자에서 "확인"단추를 클릭 한 직후에 아약스 요청을해야한다는 것입니다.이 때 jQuery 대화 상자에서 아약스 요청을 할 때마다로드 애니메이션이 시작됩니다. 그러나 대화 상자를 삭제하고 제거하고 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'); 

}

Answer 1

ajax 호출이 반환 될 때 콜백에서 destroy/remove를 수행해야합니다. 예 :

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