未捕获的错误：无法在初始化之前调用对话框上的方法；试图调用方法“选项”

Question

我正在尝试使用 jQuery UI 对话框来提供一个小的弹出窗口，它会带来一些关于客户的信息并显示一个表单。一切正常，除了它只适用于第一次点击。如果我尝试再次单击同一个按钮或另一个按钮，我会收到错误消息：

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

我已经设法弄清楚它与关闭/销毁对话框有关，但我不明白我做错了什么。如果我评论 $(this).dialog('destroy'); 部分，那么至少对话框有效，但我得到一个不同的错误

Uncaught TypeError: Object Exclude something has no method 'dialog'

我已经尝试使用带有 jquery-ui-1.9.2 的 jQuery 1.8.3/1.9.1 并且遇到了同样的问题。

这是我设置的：http://jsfiddle.net/ycZpQ/

Answer 1

编辑：我发现了真正的问题。

您指的是页面上的所有按钮，而不是明确决定哪些按钮。

$('button').click(function() {...});

正在将所有按钮附加到显示的对话框中 - 包括对话框中的！

所以我会一步一步地解决这个问题，在弄清楚这一点的同时，我还发现了您的代码中的一些其他问题，主要是语义或不良做法，我也会解决它们。

首先是按钮！通过将这些按钮与其他按钮区别开来，换句话说，一些共同因素，您可以确保您不会处理错误的按钮。

<div class="buttons"> ... </div>

然后：

$('.buttons').on('click', 'button', function() {
    ...
});

确保我没有处理对话框内部的按钮。

这导致了我所说的哑循环：

1. 单击按钮 -> 创建对话框
2. 点击关闭按钮 -> 关闭对话框 -> 再次打开对话框（因为这也是一个按钮）

现在导致错误的问题是您为对话框命名的部分：

.dialog('option', 'title', $(this).attr('title'))

^ 在这里，因为按钮是关闭按钮，您试图处理 其 标题而不是“排除”按钮，例如，导致错误 - 因为那是一个虚拟按钮那只是被丢弃了！它也没有标题！

这就是为什么错误是指对象排除某些东西，这显然不是一个对象，而是对话框的标题。关闭按钮在关闭/打开阶段之间以某种方式接收到该对象 ID。

http://jsfiddle.net/ycZpQ/7/

关于代码中更多编辑的注释：我对对话框创建的外观进行了一些更改，主要是语义上的，但请注意我是如何定义按钮的 - buttons 对象是一个带有属性按钮的对象，而不是具有属性的按钮对象数组。效率高一点，眼睛也舒服一点。

Answer 2

当单个页面使用 jquery-ui.css、jquery-ui.js 和 jquery.js 的不同版本时，我遇到了这个问题。为了解决这个问题，我只使用了相同版本的 Jquery 文件

Answer 3

好吧，destroy() 方法实际上将容器与对话框类解除绑定。换句话说，它删除了功能。

如果你想关闭对话框，你想使用 close() 方法。 Check it out in their doc.

编辑： 仅当您不再需要使用该对话框时才应调用 destroy() 方法。

Answer 4

你需要阅读.on jquery method，

然后尝试这样的事情：

$('.dialog-edit').on("click", function(){
    $(this).dialog({ .... });
});

关闭对话框试试

$('.dialog-close').on("click", function(){
        $(this).dialog("close");
    });

附：始终使用类而不是 id。这是更好的方法