Jquery对话框模式没有关闭

Question

单击“保存”或“取消”时，我有一个未关闭的对话框模式。我已经与jQuery UI's official demo page进行了比较，似乎无法找到为什么这不起作用。

这就是我所拥有的：

 $(function () {
            $("#DetailsWindow").dialog({
                autoOpen: false,
                resizable: false,
                height: 500,
                width: 600,
                modal: true,
                title: 'Appointment Details',
                buttons: {
                    "Save": function () {
                        $(this).dialog("close");
                    },
                    "Cancel": function () {
                        $(this).dialog("close");
                    }
                }
            });

            $('button').click(function () {
                $("#DetailsWindow").dialog("open");
            });
        });

HTML：

 <button>A button</button>
        <div id="DetailsWindow">
            <h3>Title</h3>
            <span>Some Text</span>
        </div>

Answer 1

您的$('button')查询应该更具限制性，否则它会匹配页面上的所有<button>标记，包括jQuery对话框中的标记，从而使其保持打开状态。

我建议在主按钮上添加一个类：

<button class="open-details">A button</button>

然后将您的JavaScript更改为：

$('button.open-details').click(function() {
    $("#DetailsWindow").dialog("open");
});

Answer 2

尝试使用：

 $(this).dialog('destroy').remove();

而不是：

 $(this).dialog("close");