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元素，以便您可以从网站的任何视图中引用它。。因此，布局实际上与任何引用该布局的视图一起呈现。

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

<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>

总结一下：

点击主页面中的链接打开#veliki对话框。
我通过点击第一个对话框中的链接创建并打开#maleni对话框。
关闭#maleni对话框，销毁它并移除#maleni div。
关闭#veliki对话框。
点击主页面中的其他链接，打开#veliki对话框。
我创建并打开#maleni对话框，该对话框现在神奇地出现了两次（如FireBug中所示）。
我用头砸墙，没有解决任何问题。

有想法的人吗？

Answer 1

为什么不使用现有的窗口但内容不同？我用这个功能创建了一个小提琴：http://jsfiddle.net/scaillerie/wEX42/。

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

您的案例中的实施示例如下：

布局页面：

<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>

对话框内的对话框会自动呈现N次

1 个答案: