对话框中的对话框在自身上渲染 N 次

Question

使用 ASP.NET MVC 4、jQuery 1.6.2、jQuery UI 1.8.11。目前在 Firefox 16.0.2 中调试。

我正在尝试让这个东西工作，所以我有一个可重用的 jQuery UI 模态对话框，带有 autoOpen: false，它从主页打开。到目前为止，一切都很好。该可重用的 jQuery UI 对话框将打开一个新的模态对话框，该对话框稍后会在需要时被销毁并再次创建（我试图使另一个也可重用但我失败了，它在第一个对话框中一直显示为 div，而不是作为新的单独对话应该如此，最终我决定每次需要时都创建它）。

当我第一次打开第一个对话框时，我可以毫无问题地打开和关闭第二个对话框。但是，当我关闭第一个对话框并再次打开它时，就会出现问题。它的行为就像我打开第一个对话框的次数一样多的对话框占位符 div。虽然我很确定我每次关闭它时都会销毁第二个对话框并删除占位符 div。

我已将对话框代码放入 /Views/Shared/_Layout.cshtml 文件中，并且主页会引用该布局文件。对于不熟悉 ASP.NET MVC 的人来说，布局文件是一个共享文件，其中包含定义网页布局的页眉、页脚和其他 html 元素，以便您可以从网站的任何视图中引用它.所以布局实际上是与引用该布局的任何 View 一起呈现的。

这是我的布局文件中的（伪）代码：

<html>
    <head>
        <script type="text/javascript">
            $.ajaxSetup({ cache: false });
            $(document).ready(function () {
                $("#veliki").dialog({
                    close: function () {
                        $("#veliki").html("");
                        $("#maleni").dialog("destroy");
                        $("body").find("#maleni").remove(); /* a desperate attempt to remove ALL divs which hold the 2nd dialog, was just: $("#maleni").remove(); */
                    },
                    modal: true,
                    height: 600,
                    width: 800,
                    left: 0,
                    autoOpen: false
                });

                $(".openDialog").live("click", function (e) {
                    e.preventDefault();
                    $("#veliki").load($(this).attr('data-url'));
                    $("#veliki").dialog("open");
                });
            });
        </script>
    </head>
    <body>
        <div id="veliki"></div>
        @RenderBody(); <!-- The ASP.NET MVC view gets rendered here -->
    </body>
</html>

与第二个对话框相关的代码放置在引用另一个布局（不包含任何 jQuery 代码的布局）的视图之一中。该视图中的代码如下所示：

<script type="text/javascript">
    $(document).ready(function () {
        $(".openSubDialog").live("click", function (e) {
            e.preventDefault();
            $('<div id="maleni"></div>')
            .appendTo("body")
            .dialog({
                close: function () {
                    $("#maleni").dialog("destroy");
                    $("#maleni").remove();
                    $("body").find("#maleni").remove(); /* delete them all. but where did "they" appear from?! */
                },
                modal: true,
                height: 450,
                width: 600,
                left: 0
            })
            .load($(this).attr('data-url'));
        });
    });
</script>

总结一下：

1. 我通过单击主页中的链接打开#veliki 对话框。
2. 我通过单击第一个对话框中的链接来创建并打开 #maleni 对话框。
3. 我关闭了#maleni 对话框，将其销毁并删除了#maleni div。
4. 我关闭了#veliki 对话框。
5. 我通过单击主页中的另一个链接打开#veliki 对话框。
6. 我创建并打开了 #maleni 对话框，它现在神奇地出现了两次（如在 FireBug 中所见）。
7. 我用头撞墙，没有解决任何问题。

有人有想法吗？

Answer 1

您为什么不使用已经存在但内容不同的窗口？我用这个功能创造了一个小提琴：http://jsfiddle.net/scaillerie/wEX42/。

要点是您不必处理 close 窗口的 close 事件：您只需使用 $("#maleni").dialog("close"); 关闭它，当您再次需要它时，您重新打开它：@987654325 @。

在您的情况下，实施示例如下：

布局页面：

<html>
    <head>
        <script type="text/javascript">
            $.ajaxSetup({ cache: false });
            $(document).ready(function () {
                $("#veliki").dialog({
                    close: function () {
                        $("#maleni").dialog("close");
                    },
                    modal: true,
                    height: 600,
                    width: 800,
                    left: 0,
                    autoOpen: false
                });

                $("body").delegate(".openDialog", "click", function (e) {
                    $("#veliki").dialog("open").load($(this).attr('data-url'));
                });

                $("#veliki").delegate(".openSubDialog", "click", function (e) {
                    $("#maleni").dialog("open").load($(this).attr('data-url'));
                });
            });
        </script>
    </head>
    <body>
        <div id="veliki"></div>
        @RenderBody(); <!-- The ASP.NET MVC view gets rendered here -->
    </body>
</html>

子页面：

<div id="maleni"></div>
<script type="text/javascript">
    $(document).ready(function () {
        $("#maleni").dialog({
                modal: true,
                height: 450,
                width: 600,
                left: 0,
                autoOpen: false
         })
         .load($(this).attr('data-url'));
        });
    });
</script>