当 autoOpen false 时 jquery-ui 对话框中的按钮不显示

Question

将 autoOpen 设置为 false 后，我无法在 jquery-ui 对话框中显示按钮。

我用这样的按钮设置了我的对话框。

$(document).ready(function() {
    $("#dialog-form").dialog({
        autoOpen: false,
        modal: true,
        buttons: {
            Ok: function() {
                $(this).dialog("close");
            }
        }
    });
});

单击页面上的其他内容后，我运行此行以打开我的对话框。

$("#dialog-form").dialog("open");

但是，对话框不显示任何按钮。我发现如果我设置autoOpen: true，那么当对话框立即打开时，按钮就会出现。如何在需要通过调用打开对话框时显示按钮（即设置autoOpen: false）？

Answer 1

根据 API，原始代码也应该可以工作： API 中的一个示例：

....
<script>
$( "#dialog" ).dialog({ autoOpen: false });
$( "#opener" ).click(function() {
    $( "#dialog" ).dialog( "open" );
});
</script>
...

我没有看到在文档就绪时初始化的代码...如果代码在文档就绪时没有初始化，则包含小部件标签的部分还无法加载，并且小部件将不会被初始化。当调用$( "#dialog-form" ).dialog( "open" ); 时，将应用新的初始化，因此按钮不会出现。

将您的 JS 初始化代码放入 document.ready 部分

$(function() {

  $("#dialog-form").dialog({
    autoOpen: false,
    modal: true,
    buttons: {
        Ok: function() {
            $(this).dialog("close");
        }
    }
  });

});