检查对话框是否打开会抛出 "cannot call methods on dialog prior to initialization" 错误

Question

我正在使用对话框并使用我在文档中找到的代码对其进行检查

var isOpen = $( "#dialogName" ).dialog( "isOpen" );
$("#here").on("click", function(e){
    if(isOpen){
        $("#dialogName").dialog("close");
    } 
});

有时我会收到错误消息：

Uncaught Error: cannot call methods on dialog prior to initialization; attempted to call method 'close'

有时找不到 isOpen。我想做的是：

单击 #here 它必须检查对话框是否存在，然后 close 否则什么都不做。

Answer 1

isOpen是在现有对话框上调用的方法，而对话框尚未初始化。

您应该先初始化对话框，然后在 click 事件处理程序中检查当前对话框是否 isOpen。

// initialize the dialog:
var myDialog = $( "#dialogName" ).dialog({
    // dialog settings:
    autoOpen : false,
    // ... 
});

$("#here").on("click", function(e){
    // on click, check if is opened:
    var isOpen = myDialog.dialog("isOpen");
    if(isOpen){
       myDialog.dialog("close");
    } 
});

DEMO

Answer 2

看来您还需要检查 #dialogName 是否已被对话。一种可能的检查方法是查看分配给对话框元素的 class 名称：

$("#dialog").hasClass("ui-dialog-content") && $("#dialog").dialog("isOpen")

演示

$(function() {
  $("#init").one("click", function() {
    $("#dialog").dialog();
    $(this).val("Click to open dialog").on("click", function() {
      $("#dialog").dialog("open");
    });
  });
  $("#here").on("click", function(e) {
    if ($("#dialog").hasClass("ui-dialog-content") && $("#dialog").dialog("isOpen")) {
      $("#dialog").dialog("close");
    } else {
      alert("Dialog not initialized or dialog not open");
    }
  });
});

@import url("//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.min.css");

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

<div id="dialog" title="Dialog title" style="display: none;">Dialog content</div>

<input type="button" id="init" value="Click to create dialog">
<input type="button" id="here" value="Click to close dialog">

检查对话框是否打开会抛出 "cannot call methods on dialog prior to initialization" 错误

Checking if dialog isOpen throws "cannot call methods on dialog prior to initialization" error

javascript

jquery

jquery-ui

jquery-ui-dialog