在使用 JQuery UI 的对话框组件时，有时候会遇到这个错误，即“cannot call methods on dialog prior to initialization; attempted to call method 'close'”。这个错误通常表示我们试图在对话框未初始化的情况下调用了其方法，例如在关闭对话框时出错。本文将详细介绍这个问题及其解决方法。
问题原因
该错误通常发生在以下情况下：
- 尝试在对话框未初始化时调用对话框方法；
- 对话框初始化失败或未被正确初始化。
例如，在以下代码中：
$("#my-dialog").dialog("close");上面的代码试图关闭一个名为“my-dialog”的对话框。但是，如果该对话框在此之前并没有被正确初始化，就会引发上述错误。
解决方法
要解决这个问题，我们需要确保对话框已经被正确地初始化。下面是几种可能的解决方法：
方法一：检查对话框是否已初始化
可以通过检查对话框是否已被初始化来解决这个问题。可以通过以下代码来检查：
if(!$("#my-dialog").hasClass("ui-dialog-content")) {
$("#my-dialog").dialog();
}
$("#my-dialog").dialog("close");上述代码首先检查名为“my-dialog”的元素是否拥有“ui-dialog-content”类，这是 JQuery UI 对话框组件在初始化时添加的类。如果该元素没有这个类，则说明对话框尚未被正确初始化，需要调用 $("#my-dialog").dialog() 来完成初始化。
方法二：使用 Promise
可以使用 Promise 来确保对话框已经被正确地初始化。例如：
$("#my-dialog").dialog().promise().done(function() {
$("#my-dialog").dialog("close");
});上述代码使用 promise() 方法来获取一个 Promise 对象，并在 Promise 对象完成后关闭对话框。这样可以确保对话框已经被正确地初始化。
示例代码
下面是一个完整的示例代码，演示了如何在对话框被正确初始化之后关闭它：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------- ------ ---------------
----- ---------------- -------------------------------------------------------------
------- -------------------------------------------------
------- --------------------------------------------------------
-------
------
---- -------------- --------- --------
---- -- -- -------
------
------- --------------------- ---------------
------- ----------------------- ---------------
--------
---------------------------- -
---------------------------------- -
------------------------
--------- ------
------ ----
------------------
---
----------------------------------- -
-- ----- ------- -- ---- ---- ------ -- -----------
-------------------------------------------------- -
--------------------------------
---
---
---
---------
-------
-------上面的代码定义了一个名为“my-dialog”的对话框，并在页面上添加了两个按钮，用于打开和关闭对话框。在点击“Close Dialog”按钮时，使用 promise() 方法确保对话框已被正确初始化后再关闭它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/606ee3602d2a29a3c12022db