Jquery UI (v1.8.20)对话框-销毁而不是删除添加的UI元素，并且不将元素返回到其原始位置

从我所读到的，$(#selector).dialog("destroy")应该删除所有添加的jquery ui元素，并返回元素，对话框附加到，回到其原始的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>

发现两个导致destroy不能工作的问题:

1) ==>

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

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

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

一旦我这样做了，它开始删除所有添加的jquery ui元素。但是它仍然没有把元素(id="testPopUp")放回它原来的DOM位置，这是在我完成下面的#2之后解决的。

2)修改jquery ui版本为jquery-ui-1.10.4.custom.min.js。

相关内容

最新更新

热门标签：