jQueryUI 대화 상자에서 내 페이지가 깨졌습니다.

Question

잘 작동하는 jQueryUI의 .dialog() 기능에 페이지를로드하려고합니다. 그러나 대화 상자를 닫은 후에도 나머지 페이지는 계속 사용할 수 없습니다. 완벽하게

$(function() { 
    var w = $(document).width(); 
    var h = $(document).height(); 

    $("#diag").dialog({ //dialog box settings 
     autoOpen: false,  //do not open automatically 
     show: { 
      effect: "slide"  //slide frame in 
     }, 
     modal: true,   //disable the other elements 
     width: w,    //set width to window width 
     height: h    //set width to window height 
    }); 

    $(".icon").click(function() { //on .icon click 
     var v = $(this).attr('value'); //load value of clicked item into v 
     $("#diag").load(v).dialog("open"); //open the #diag box 
    }); 
}); 

나는 .load(v)을 빼앗아 및 V의 초기화를 주석

, .dialog() 작품. 나는 혼란 스럽다.

Answer 1

문제는 아마도 .load이 비동기 적으로 콘텐츠를 대체하기 때문에 대화 상자를 제대로 닫는 모든 이벤트 바인딩을 잃을 수 있습니다.

대신을 시도해보십시오 즉

var v = $(this).attr('value'); 
var dialogContent = $('#diag'); 
dialogContent.load(v, function() { 
    dialogContent.dialog('open'); 
}); 

을, 대화 상자를 열기 전에 완료 부하를 기다립니다.

Answer 2

모든 기능을 제대로 작동하도록 클릭 기능 내부로 이동했습니다. 모두 도움을 주셔서 감사합니다.

$(function() { 
$(".icon").click(function() { //on .icon click 
    var w = $(document).width(); 
    var h = $(document).height(); 

    $("#diag").dialog({ //dialog box settings 
     show: { 
     effect: "slide"  //slide frame in 
     }, 
     modal: true,   //disable the other elements 
     width: w,   //set width to window width 
     height: h    //set width to window height 
}); 
    var v = $(this).attr('value'); //load value of clicked item into v 
$("#diag").load(v).dialog("open");  //open the #diag box 
}); 

});