在对话框内加载 aspx 页面时，JQuery 对话框未第二次打开

Question

我已经检查了类似的问题，但没有一个给我解决方案...这就是为什么发布这个问题..所以请给我一个解决方案而不是投票...

我正在我的对话框中加载一个 aspx 页面。它第一次工作正常，但是如果我第二次关闭并重新打开它..它没有被打开..

这是我处理对话脚本的 default.aspx

       <html>
        <head>
            <script type="text/javascript">
                    $(document).ready(function() {
                    $("#thedialog").dialog({
                            autoOpen: false,
                            modal: true,
                            position: 'center',
                            width: 900,
                            open: function() {
                            $('#thedialog').load("AddDetails.aspx");
                            }
                        });

                         $('#link').click(function() {
                          $('#thedialog').dialog('open');

                        });

                    });
             </script>
        </head>
        <body>
            <div id="thedialog" style="display: none; overflow: hidden">
           <span id="link" style="color: #88b807; margin-left: 839px;
                            margin-top: -12px; cursor: pointer; display: block">Create</span>
</div>
        </body>
        </html>

这是我的 AddDetails.aspx

<body>
    <form id="form1" runat="server">
    <div>
        <table id="table" style="border-spacing: 7px 7px; margin-left: 5px">
            <tr>
                <td>
                    <span class="SubHeading">Private Space Name </span>
                </td>
                <td>
                    <asp:TextBox ID="txt_spacename" runat="server" />
                </td>
            </tr>
            <tr>
                <td>
                    <span class="SubHeading">Private Space Description </span>
                </td>
                <td>
                    <asp:TextBox ID="txt_spacedesc" TextMode="MultiLine" runat="server" />
                </td>
            </tr>
</table>
</div>
</form>
</body>

如果我只是打开一个正在打开的对话框，而不是加载一个页面，但如果我在对话框中加载一个页面，它不会打开...

帮助...

Answer 1

从您更新的代码看来，您单击的链接位于您正在加载 ajax 调用的 div 内。如果是这种情况，那么您加载对话框的点击事件只会被绑定一次（在初始页面加载时）。当再次加载链接元素时（我假设它在加载的 ajax 响应中），它不再绑定 click 事件。

要解决这个问题，您可以：

1. 将您的链接移到#thedialog div 元素之外（现在看起来它没有正确关闭）

2. 修改您的 javascript 以添加一个委托，以便即使页面 (DOM) 发生更改，点击事件也会在该类型的元素上触发，例如：

   $("#thedialog").delegate("#link", "click", function () {
       $('#thedialog').dialog('open');
       return false;
   });
   

   如果对话框本身中有 #link 元素，选项 2 可能会产生一些奇怪的结果 - 如果这能解决问题，我会选择第一个选项。

---

更新：

以上在我的浏览器上工作，但为了确保我会尝试以下代码并查看它是否工作，我猜可能是 jquery / jquery ui 的版本不正常或不是最新的.

<html>
<head>
<title>Test dialog page</title>
<link href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet"
    type="text/css" />
<script src="http://code.jquery.com/jquery-1.8.3.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#thedialog").dialog({
            autoOpen: false,
            modal: true,
            position: 'center',
            width: 900,
            height: 300,
            open: function () {
                $('#thedialog').load("AddDetails.aspx");
            }
        });

        $('#link').click(function () {
            $('#thedialog').dialog('open');
        });

    });
</script>
</head>
<body>
<div id="thedialog" style="display: none; overflow: hidden">
</div>
<span id="link" style="color: #88b807; cursor: pointer; display: block">Create</span>
</body>
</html>

我会尝试/推荐的其他事情：

• 从 AddDetails.aspx 中删除包裹体标签（除非您是 以非ajax方式使用它）。还要确保它没有引用母版页。
• 确保页面上没有运行其他 javascript - 没有 例如，在 AddDetails 页面中引用的脚本。
• 如果您仍然遇到问题，请尝试在 Firebug 中的控制台或其他浏览器中的等效项中查看 - 是报告错误还是静默失败？