jquery - jQueryUI 对话框打破了我的页面

Question

我正在尝试将页面加载到.dialog()jQueryUI 的功能中，效果很好。但是关闭对话框后，我的页面的其余部分仍然被禁用。

$(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
});

});