关闭jQueryUI对话框后，再次显示该对话框_Jquery_Jquery Ui_Jquery Ui Dialog

关闭jQueryUI对话框后，再次显示该对话框

jquery jquery-ui

关闭jQueryUI对话框后，再次显示该对话框,jquery,jquery-ui,jquery-ui-dialog,Jquery,Jquery Ui,Jquery Ui Dialog,我在页面上有几个链接，我想为每个链接显示单独的jQuery对话框。以下是标记： <html> <body> <div class="container"> <a href="#" class="delete_link">delete</a>  &

我在页面上有几个链接，我想为每个链接显示单独的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>

如您所见，触发事件的链接具有

delete\u链接

类，而应该是jQuery UI对话框的div具有

dialog\u框

类

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

根据google和SO search的说法，我不是第一个遇到这个问题的人。例如，这篇文章：看起来，该对话框应该在

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");
    });
});

我已经在JSFIDLE上预选了演示：没有jQueryUICSS，但我希望它足以理解这个问题

任何帮助都将不胜感激。

发生的事情是jQuery将对话框div从容器div中取出，并将其放在html正文的最底部，而不是放回关闭状态。我认为这实际上是在一般情况下使用jQuery对话框时的最佳实践，否则您必须编写一些清理代码才能将对话框div返回到容器div中

如果不是绝对必要的，我会避免使用多个对话框div，因为您可能不会同时打开多个对话框。一个选项是在每个对话框上放置一个id，例如：

<div id="dialog_box_1" class="dialog_box">
  ...
</div>

...

然后使用以下链接打开对话框（更改#1以打开相应的对话框）：

现在，您可以将连接对话框的代码移到click事件之外，然后尝试以下操作：

<script type="text/javascript">
    $(function() {
        $('.dialog_box').modal();

        $('.dialog_open').click(function(e) {
             e.preventDefault();
             var id = $(this).attr('href').replace('#', '');
             $('#dialog_box_' + id).dialog('open');
        });
    });
</script>


$（函数（）{
$（'.dialog_box'）.modal（）；
$（'.dialog_open'）。单击（函数（e）{
e、 预防默认值（）；
var id=$（this.attr（'href'）.replace（'#'，''）；
$（'.'对话框'+id）.dialog（'打开'）；
});
});

请注意，我从未使用过jQueryUI对话框

希望有帮助。

尝试在对话框按钮函数中调用dialog（“destroy”）

事实上，我遇到了一个类似的问题，通过这里的一些提示，我解决了这个问题

基本上，我正在创建一个带有类“showpopuplink”的链接，单击该类将打开以下元素作为弹出窗口

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

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

我唯一担心的是，显示为弹出窗口的元素可能存在内存泄漏，但可能不是因为jqueryui应该处理这个问题

我希望这对您有用。

无论发生什么情况，您都应该在对话框中调用“销毁”。这将防止每次调用对话框时创建内存泄漏（多个DIV）。在对话框的“关闭”功能中，只需放入$（“#dialog”）.dialog（“销毁”）；进行适当的清理。

是的，我可以：

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

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

});

改变

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

与

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

这将删除对话框，保留已显示的对话框不变，并且再次显示对话框将清除以前输入的数据

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

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

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

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

});

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

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

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