jquery 对话框仅第一次加载内容

Question

我在 jquery 中有以下显示面板内容的对话框，但它只加载第一次的内容。在第二次单击时，它仅显示模态叠加。如何在每次点击时加载内容？

asp:Panel ID="pnlCertificate" runat="server">
   <img id="imgCertificate" runat="server" style="position: relative;" /> 
</asp:Panel>

<div style="display: none">
   <div id="openDialog" style="text-align: center; position: relative; width: 956px; overflow-x: auto;">
   </div>
</div>


function viewCertificate() {
        $("#openDialog").dialog({
            modal: true,
            draggable: false,
            width: 1000,
            height: 700,
            autoOpen: true,
            open: function () {
                $('#openDialog').append($("[id$=pnlCertificate]").html());
                $('.ui-dialog-buttonpane').addClass('dialogButton');
                $('.ui-dialog-titlebar').addClass('dialogTitle');
            },
            close: function (event, ui) {
                $("#openDialog").remove();
            },
            buttons: [
            {
                text: "Print",
                "class": 'printButton',
                click: function () {

                }
            },
            {
                text: "Close",
                "class": 'closeButton',
                click: function () {
                    $(this).dialog("close");
                }
            }
          ]
        });
        $("[id$=btnPreview]").click(function (event) {
            event.preventDefault();
            $("#openDialog").dialog("open");
        });
    }

Answer 1

.remove() 不会破坏你的容器吗？尝试 .empty() 代替？