Question

根据我的阅读，$(#selector).dialog("destroy")应该删除所有添加的jquery ui元素，并将附加的对话框返回到原来的DOM位置。我写了一个测试html，它也没有。在萤火虫中，在我点击关闭之后，它只会使它变得不可见（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>

Answer 1

发现导致破坏无效的两个问题：

1）在这一行==＆gt;

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

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

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

一旦我这样做，它就开始删除所有添加的jquery ui元素。但它仍然没有将元素（id =＆＃34; testPopUp＆＃34;）恢复到它的原始DOM位置，这在我完成＃2之后解决了。

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

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

1 个答案: