关闭后再次显示 jQuery UI 对话框答案

【问题标题】：Diplay jQueryUI dialog again after it was closed关闭后再次显示 jQuery UI 对话框
【发布时间】：2011-07-10 08:54:00
【问题描述】：

我在页面上有几个链接，我想为每个链接显示单独的 jQuery 对话框。这是标记：

<html>
    <body>
        <div class="container">
            <a href="#" class="delete_link">delete</a> <!-- when this link is clicked, dialog should popup -->
            <div class="dialog_box"> <!-- this is the dialog for jquery UI -->
                 Pleasy specify a reson for your action    
                 <textarea rows="5" cols="60"></textarea>
            </div>
        </div>
        <div class="container">
            <a href="#" class="delete_link">delete</a> <!-- when this link is clicked, dialog should popup -->
            <div class="dialog_box"> <!-- this is the dialog for jquery UI -->
                 Pleasy specify a reson for your action    
                  <textarea rows="5" cols="60"></textarea>
            </div>
        </div>
    </body>
</html>

还有 Javascript：

$(document).ready(function() {
    $('.delete_link').click(function() {
        alert('about to show jQuery dialog!');
        var d = $(this).closest('DIV.container').find('DIV.dialog_box').dialog({
            autoOpen: false,
            title: 'You are going to delete a div!',
            buttons: {
                "Do delete": function() {
                    alert('You have entered:' + $(this).find('textarea').val());
                    $(this).dialog("close");
                    $(this).closest('DIV.container').hide(); //hiding div (primary action)     
                }
            },
            width: 800
        });
        d.dialog("open");
    });
});

如您所见，触发事件的链接具有delete_link 类，而应该是jQuery UI 对话框的DIV 具有dialog_box 类。

问题：当对话框打开并且用户按下“关闭”时，无法再次打开对话框。

根据谷歌和 SO 搜索，我不是第一个遇到这个问题的人。本帖，例如：http://blog.nemikor.com/2009/04/08/basic-usage-of-the-jquery-ui-dialog/ 看来，该对话框应该在 click() 操作之前以某种方式初始化，但在所有解决方案中，页面上只有一个对话框，具有分配的 ID - 我只是无法将其应用于我的情况。

我试过了，但它不起作用：

$(document).ready(function() {
    //initializing
    $('DIV.dialog_box').dialog({
        autoOpen: false,
        title: 'You are going to delete a div!',
        buttons: {
            "Do delete": function() {
                alert('You have entered:' + $(this).find('textarea').val());
                $(this).dialog("close");
                $(this).closest('DIV.container').hide(); //hiding div (primary action)     
            }
        },
        width: 800
    });

    $('.delete_link').click(function() {
        alert('about to show jQuery dialog!');
        $(this).closest('DIV.container').find('DIV.dialog_box').dialog("open");
    });
});

我已经在 jsFiddle 准备了演示：http://jsfiddle.net/NQmhk/ 那里没有 jQUery UI css，但我希望它足以理解问题。

任何帮助将不胜感激。

【问题讨论】：

标签： jquery jquery-ui jquery-ui-dialog

【解决方案1】：

我正在使用 C#、MVC Partials 和嵌套的 jQuery 对话框。我正在从已显示的对话框（MVC 部分）中显示 [第二个] 对话框（MVC 部分）。该对话框将重新显示第二次，但它会被向上推，因为旧的对话框容器没有被破坏，抵消了中心/顶部的计算。

这将删除对话框，使已显示的对话框保持原样，并且再次显示该对话框会清除以前输入的数据。

buttons: {
                        "Close": function () {
                            $("#MyDivPlaceholder").dialog("close");
                            $("#MyDivPlaceholder").empty();
                            $("div[aria-describedby='MyDivPlaceholder']").remove();
                        }
                    }

【讨论】：

【解决方案2】：

改变

$(this).dialog("close");

与

$(this).dialog("destroy");

【讨论】：

【解决方案3】：

是的，破坏会为我工作：

$('.ui-dialog-titlebar-close').click(function(){

   $("#dialog2").dialog("destroy");

});

【讨论】：

【解决方案4】：

无论如何，您仍然应该在对话框中调用“destroy”。这将防止每次调用对话框时创建的内存泄漏（多个 DIV）。在对话框的“关闭”功能中只需放入 $("#dialog").dialog("destroy");进行适当的清理。

【讨论】：

【解决方案5】：

实际上我遇到了类似的问题，并从这里得到了一些提示，我解决了它。

基本上，我正在创建一个带有“show-popup-link”类的链接，当单击它时，它将以弹出窗口的形式打开以下元素。

<a href="#" class="show-popup-link">Click for popup</a>
<div class="hidden-element">Some content for the popup</div>

在页面加载后，我正在执行这个 javascript 方法：

function SetupShowPopupLink() {
   $("a.show-popup-link").click(function () {
      var $link = $(this);
      var dialogClone = $link.next().clone();
      $link.next().dialog({ 
         title: "title", 
         close: function () { $link.after(dialogClone); }
       });
   });
}

基本上我在对话框函数将它移动到页面末尾之前克隆了我作为弹出窗口显示的元素，然后我将它插入到链接之后（它在开始时被隐藏，插入时将被隐藏再次）。

我唯一担心的是显示为弹出窗口的元素可能存在一些内存泄漏，但可能不是因为这应该由 jquery-ui 处理。

我希望这对你有用。

【讨论】：

【解决方案6】：

尝试在对话框按钮函数中调用 dialog("destroy")。

【讨论】：

其实，这有帮助，谢谢。我现在每次都在创建和销毁对话框。谢谢。
我不确定，但我认为 dialog('destroy') 不会恢复
在 html 文档中的位置。如果我没记错的话，它只是对 div 样式属性进行了一些清理以将其恢复到以前的状态，但它不会将
的位置恢复到原来的位置。
我试过“破坏”，一旦被破坏，它就扰乱了页面布局。并且不再出现。看起来他应该每次都“重新创建”对话框。