jQuery UI 对话框 - 通过实例方法检查是否存在答案

【问题标题】：jQuery UI dialog - check if exists by instance methodjQuery UI 对话框 - 通过实例方法检查是否存在
【发布时间】：2025-12-14 23:35:01
【问题描述】：

我想使用instance 方法来测试jQuery UI Dialog 小部件是否已经初始化。关于API，这是可能的，但它对我不起作用：

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

演示：http://jsfiddle.net/mDbV7/

更新：

这是文档中的错误，instance 方法将从版本 1.11.0 开始提供，请参阅 this issue。

【问题讨论】：

标签： jquery-ui-dialog

【解决方案1】：

你可以使用：

if($('#id').is(':ui-dialog')) {
}

或

    var obj = $('<div>test</div>').dialog();
    if (obj.is(':ui-dialog')) {
      alert('I\'m a dialog')
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

【讨论】：

这么多解决方案，没有工作示例...Here's a fiddle based on OP's fiddle 显示它在 $v1.9.1 中有效。
真的很抱歉，我加了一个sn-p。

【解决方案2】：

对于 jQuery UI - v1.10.3

if($( "#myDialog" ).is(':data(uiDialog)')){//is(':data(dialog)') does not work
    //Dialog exist
}

【讨论】：

【解决方案3】：

最新版本的 jQuery UI 不再允许您在尚未初始化的项目上调用 UI 方法。我刚刚将它们包装在 if 语句中，例如：

if ($("#divToBeDialoged").hasClass('ui-dialog-content')) {
    // do whatever
} else {
    // it is not initialized yet
}

编辑：更改类名，感谢@dmnc

【讨论】：

所以 API 文档已经过时了？
@pavian，否则小部件可能被窃听。
@jbabey，instance 方法被明确记录为一种特殊情况。
谢谢大家，我已将此报告为documentation issue。
@pavian 是正确的，#divToBeDialoged 得到类 ui-dialog-content 而不是 ui-dialog。

【解决方案4】：

     if ($('#update').is(':data(dialog)')) 
     {
              //#update has dialog
     }
     else
     {
              //#update does't have dialog
     }

【讨论】：

也不是我（jQ 1.9.1，ui 1.10.3）

【解决方案5】：

使用完对话框后清空和销毁对话框也是一个好习惯。我通常在每个对话框的关闭事件中使用这段代码

$("#myDialog").dialog({
    // other options
    close: function(event, ui) {
        $(this).empty().dialog('destroy');
    }
}

这是我的建议，而不是每次都询问实例中是否存在对话框，请确保每个对话框都自行清理。

【讨论】：

是的，它可以避免无法预料的错误。
这是一个非常好的建议，特别是如果您要重用具有不同主题的对话框，谢谢！
请注意，您只需要.dialog('destroy') 即可切换存在。 .empty() 将删除模态框的内容。

【解决方案6】：

如果您是从 html 代码中的现有 id 制作该对话框，例如以下示例：

$('#main').dialog({});

注意dialog() 将ui-dialog 类添加到为它工作而生成的<div> 父元素中。在#main 元素处，dialog() 添加的类是：ui-dialog-content 和ui-widget-content（在 jquery-ui-1.9.2 中）。因此，在这种情况下，按照@jbabey 的示例，您可以检查现有对话框的操作：

if ($('#main').hasClass('ui-dialog-content')) {
    // do whatever
}

【讨论】：

【解决方案7】：

另一种方法是

$('.element').is(':data(dialog)');

【讨论】：