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')查询应该更加严格，否则它会匹配 ALL <button>页面上的标签，包括 jQuery 对话框内的标签，导致它不断打开。

我建议向您的主按钮添加一个类:

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

然后将 JavaScript 更改为:

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