重新打开加载的jQuery div对话框

Question

我有一个按钮,当单击时将外部页面(相同的域)加载到div并将该div显示为jQuery UI对话框.

<div id="Dialog_box"></div>

<script type="text/javascript">
    $(function() {
        $("#Dialog_box").dialog({
            autoOpen: false,
            modal: true,
            width: 500,
            height: 400,
            title: "Dialog",
            close: function(event, ui) {
                $("#Dialog_box").html(""); // Ensure the page is no longer loaded
            }
        });
    });

    function openDialog() {
        $(document).ready(function() {
            $("#Dialog_box").load("dialog.php").dialog('open');
        });
    }
</script>

<button onclick="openDialog();">Open Dialog</button>

第一次单击该按钮时,它打开正常.关闭后,它将不再恢复.

首先,我确认它实际上在击中'X'时被关闭

$("#Dialog_box").dialog({
    ...
    close: function(event, ui) {
        alert("Closed");
    }
});

警报正在显示.然后我尝试使用我的普通代码,但没有加载到页面中

$("#Dialog_box").dialog('open');

此时,对话框将正常打开和关闭,没有任何问题.虽然我不相信它应该重要,但我甚至尝试分离出加载和对话框命令

    function openDialog() {
        $(document).ready(function() {
            $("#Dialog_box").load("dialog.php");
            $("#Dialog_box").dialog('open');
        });
    }

再次,该框将首次显示,但在此之后不会再出现.

我的外部文件基本上是这样的

<link type="text/css" href="path/to/style.css" rel="stylesheet" />
<script type="text/javascript" src="path/to/jquery.js"></script>
<script type="text/javascript" src="path/to/jquery-ui.js"></script>

<script type="text/javascript">
$(document).ready(function() {
    $("#Submit_button").click(function() {
        // Do stuff with form data
        // POST data without changing page
    });
});
</script>

<form action=''>
    // Input fields
    <input type="button" id="Submit_button" />
</form>

只是为了澄清,无论我是否发布我的表单,都会出现问题.

为什么在我加载(并理解,卸载)页面后,对话框不会重新打开？

Answer 1

从外部文件中删除要嵌入jquery.js的行.这行将再次加载jQuery,覆盖现有的jQuery,什么会破坏已经实例化的对话框对象,因为它在覆盖的jQuery实例中注册.

澄清一下:你不需要再次嵌入jquery和jqueryui,因为如果使用$ .load(),返回的片段将成为请求文档的DOM的一部分(它们已经存在于那里).