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的一部分（它们已存在）。

Answer 2

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

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

2 个答案: