检查对话框是否打开抛出"无法在初始化之前调用对话框上的方法"错误

Question

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

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

有时我得到错误:

未捕获错误:在初始化之前无法调用对话框上的方法; 试图调用方法'关闭'

有时它找不到isOpen.我想做的是:

单击#here它必须检查对话框是否处于活动状态,close否则不执行任何操作.

Answer 1

好像您还需要检查是否#dialogName已对话.一种可能的检查方法是查看分配给dialog元素的类名:

$("#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">