Question

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

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

根据google和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，但我希望它足以理解这个问题。

非常感谢任何帮助。

Answer 1

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

基本上我正在创建一个带有“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处理。

我希望这适合你。

Answer 2

尝试在对话框按钮功能中调用对话框（“destroy”）。

Answer 3

jQuery将你的对话框div从容器div中取出并将它放在你的html主体的最底部，并且不会将其重新关闭。我认为这通常是使用jQuery对话框时的最佳做法，否则你必须编写一些清理代码，以便将对话框div放回容器div中。

如果不是绝对必要，我会避免使用多个对话框div，不需要它们，因为你可能不会同时打开多个对话框。

Answer 4

一个选项是在每个对话框上放置一个id，例如：

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

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

<a href="#1" class="dialog_open">Open</a>

现在，您可以移动在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>

请注意，我从未使用过jQuery UI对话框。

希望它有所帮助。

Answer 5

无论如何，你仍然应该在对话框上调用“destroy”。这将防止每次调用对话框时创建的内存泄漏（多个DIV）。在对话框的“关闭”功能中只需输入$（“＃dialog”）。对话框（“destroy”）;做适当的清理。

Answer 6

是的，毁灭我将为我工作：

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

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

});

Answer 7

更改

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

带

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

Answer 8

我正在使用C＃，MVC Partials和嵌套的jQuery对话框。我在已经显示的对话框（MVC Partial）中显示[第二个]对话框（MVC Partial）。该对话框将重新显示第二次，但它会被推高，因为旧的对话框容器没有被破坏，抵消了center / top的计算。

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

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

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

8 个答案: