Jquery ui jQueryUI（v1.8.20）对话框-销毁不删除添加的ui元素，不将元素返回其原始位置_Jquery Ui

Jquery ui jQueryUI（v1.8.20）对话框-销毁不删除添加的ui元素，不将元素返回其原始位置

jquery-ui

Jquery ui jQueryUI（v1.8.20）对话框-销毁不删除添加的ui元素，不将元素返回其原始位置,jquery-ui,Jquery Ui,据我所知，$（#选择器）.dialog（“destroy”）应该删除所有添加的jqueryui元素，并将该元素返回到其原始DOM位置。我编写了一个测试html，但它也没有这样做。在firebug中，我单击“关闭”后，它只会使它变得不可见（display:none）。我做错什么了吗？下面是我的测试html： <html> <head> <meta content="text/html; charset=iso-8859-1" http-equiv="Cont

据我所知，

$（#选择器）.dialog（“destroy”）

应该删除所有添加的

jqueryui

元素，并将该元素返回到其原始

DOM

位置。我编写了一个测试html，但它也没有这样做。在firebug中，我单击“关闭”后，它只会使它变得不可见（

display:none

）。我做错什么了吗？下面是我的测试html：

<html> 
<head>
    <meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type" />
    <style type="text/css">
        .modalDialogPopup {
            display:none;
            border:1px solid #4f8cc5;
        }
    </style>
    <script src="/resources/default/1_0/js/jquery.js?v=081814" type="text/javascript" ></script>
    <script src="/resources/default/1_0/js/jquery-ui-1.8.20.custom.min.js?v=081814" type="text/javascript" ></script>
    <script>
        var testPopUp = {
            popUpID : '#testPopUp',
            close:  
                function() {
                    $(this.popUpID).dialog("close");
                },
            open:       
                function() {
                    $(this.popUpID).dialog({
                        modal: true,
                        autoOpen: false,
                        title: 'Test Outer Pop Up',
                        dialogClass:'modalDialogPopup',
                        resizable: true,
                        close: function( event, ui ) {
                            $(this.popUpID).dialog( "destroy" );
                            alert('outer Pop Up Destroyed?  '+$(testPopUp.popUpID).attr("class"));
                        }
                    });
                    $(this.popUpID).dialog("open"); 
                }
            }
        $(document).ready(function() {
        });
    </script>   
</head>
<body>  
    <div id="OuterDiv">
        <a href="javascript:void(0)" onclick="testPopUp.open(); return false;" >Open PopUp</a>
        <div id="testPopUp" class="modalDialogPopup">
            <div id="testPopUpDiv" style="overflow: auto; display: table;">
                <div id="testPopUpContent" >
                    This is a Pop Up Test
                    <br/>
                    <br/>
                    <a href="javascript:void(0)" onclick="testPopUp.close(); return false;" >Close PopUp</a>
                </div>
            </div>
        </div>      
    </div>
</body>
</html>


.Modaldialog{
显示：无；
边框：1px实心#4f8cc5；
}
var testPopUp={
popUpID:“#testPopUp”，
关闭：
函数（）{
$（this.popUpID）.dialog（“关闭”）；
},
开放式：
函数（）{
$（this.popUpID）.对话框({
莫代尔：是的，
自动打开：错误，
标题：“测试外部弹出窗口”，
dialogClass:'modalDialogPopup'，
可调整大小：正确，
关闭：功能（事件、用户界面）{
$（this.popUpID）.dialog（“销毁”）；
警报（“外部弹出窗口已销毁？”+$（testPopUp.popUpID.attr（“类”））；
}
});
$（this.popUpID）.dialog（“打开”）；
}
}
$（文档）.ready（函数（）{
});
这是一个弹出测试

发现两个导致销毁无法工作的问题：

1）在这一行==>

close: function( event, ui ) {$(this.popUpID).dialog( "destroy" );

我不应该用这个。它应该是testPopUp.popUpID，如下所示

close: function( event, ui ) {$(testPopUp.popUpID).dialog( "destroy" );

一旦我这样做了，它就开始删除所有添加的jQueryUI元素。但是它仍然没有将元素（id=“testPopUp”）放回它原来的DOM位置，这是在我完成下面的第2步之后解决的

2）将我的jquery ui版本更改为jquery-ui-1.10.4.custom.min.js

你把它放在一个jsiddle中并运行jsHint了吗？把它放在jsiddle中，它实际上什么都没做。