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

我有一个按钮，单击该按钮时，将外部页面（同一域）加载到一个div中，并将该div显示为jqueryui对话框

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

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

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

此时，对话框将正常打开和关闭，不会出现任何问题。虽然我不认为这有什么关系，但我甚至尝试将load和dialog命令分开

    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>

$（文档）.ready（函数（）{
$（“#提交按钮”）。单击（函数（）{
//处理表单数据
//在不更改页面的情况下发布数据
});
});
//输入字段

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

---

为什么在我加载（据我所知，卸载）了一个页面后，对话框不会重新打开？

从外部文件中删除嵌入jquery.js的行。 这一行将再次加载jQuery，覆盖现有的jQuery，这将破坏已经实例化的dialog对象，因为它已在被覆盖的jQuery实例中注册

---

澄清一下：您不需要再次嵌入jquery和jqueryui，因为如果使用$.load（），返回的片段将是请求文档DOM的一部分（它们已经存在）。

太好了！这非常有效。我假设对话就像iFrame一样，必须被视为本质上独立的实体。谢谢你澄清这一点。

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

    $(function() {
        $( "#btnCallCompany" ).button().click(function() {
            $( "#divOpenConversation" ).dialog({
                autoOpen: true,
                height: 500,
                width: 650,
                modal: true
                });

            $.get("/Conversation.aspx",function(data){
                $( "#divOpenConversation" ).html(data);
            });
        });
    });//end func