jQuery 未捕获的错误：无法在初始化之前调用对话框上的方法；试图调用方法“选项”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17400405/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Uncaught Error: cannot call methods on dialog prior to initialization; attempted to call method 'option'
提问by Max
I'm trying to use the jQuery UI Dialog to provide a small pop-up that brings some information about a customer and shows a form. Everything works fine, except that it only works for the first click. If I try to click the same button again, or another one I get the error message:
我正在尝试使用 jQuery UI Dialog 提供一个小弹出窗口，该弹出窗口提供有关客户的一些信息并显示一个表单。一切正常，除了它只适用于第一次点击。如果我再次尝试单击同一个按钮或另一个按钮，我会收到错误消息：
Uncaught Error: cannot call methods on dialog prior to initialization; attempted to call method 'option'
I've managed to figure out it has to do with the closing/destroying of the dialog, but I don't understand what I'm doing wrong. If I comment the part $(this).dialog('destroy');then at least the dialog works but I get a different error
我设法弄清楚它与关闭/销毁对话框有关，但我不明白我做错了什么。如果我评论该部分，$(this).dialog('destroy');那么至少对话框可以工作，但我会收到不同的错误
Uncaught TypeError: Object Exclude something has no method 'dialog'
I've tried with jQuery 1.8.3/1.9.1 with jquery-ui-1.9.2 and I get the same problem.
我已经尝试使用 jQuery 1.8.3/1.9.1 和 jquery-ui-1.9.2，但我遇到了同样的问题。
This is what I have set up: http://jsfiddle.net/ycZpQ/
这是我设置的：http: //jsfiddle.net/ycZpQ/
采纳答案by casraf
EDIT:I found the real problem.
编辑：我发现了真正的问题。
You were referring to all buttons on the page instead of explicitly deciding which ones.
您指的是页面上的所有按钮，而不是明确决定哪些按钮。
$('button').click(function() {...});
Was attaching ALL buttons to the dialog showing - including the ones insidethe dialog!
将所有按钮附加到对话框显示 - 包括对话框内的按钮！
So I'll go step by step in the solution, while figuring this out I also found some other problems with your code that are mainly semantic or bad practice, I'll address them as well.
所以我会一步一步地解决这个问题，在解决这个问题的同时，我还发现了你的代码的一些其他问题，主要是语义或不好的做法，我也会解决它们。
First of all, the buttons! By giving some differentiation to those buttons than others, in other words some common factor, you can make sure you don't address the wrong buttons.
首先是按钮！通过对这些按钮与其他按钮进行一些区分，换言之，一些共同因素，您可以确保不会使用错误的按钮。
<div class="buttons"> ... </div>
And then:
进而：
$('.buttons').on('click', 'button', function() {
...
});
Made sure I'm not addressing the buttons insidethe dialog.
确保我没有处理对话框内的按钮。
What this was causing is what I refer to as a dumbloop:
这导致了我所说的哑环：
- Click button -> create dialog
- Click close button -> close dialog -> open dialog again (because this is also a button)
- 单击按钮 -> 创建对话框
- 点击关闭按钮 -> 关闭对话框 -> 再次打开对话框（因为这也是一个按钮）
Now the problem that was causing the error, is the part where you give the dialog a title:
现在导致错误的问题是您为对话框指定标题的部分：
.dialog('option', 'title', $(this).attr('title'))
^ in here, because the button was the close button, you were trying to address itstitle and not the "Exclude" button for example, resulting in an error -- because that's a dummy button that was just discarded! It also doesn't have a title!
^ 在这里，因为按钮是关闭按钮，所以您试图解决其标题而不是“排除”按钮，例如，导致错误 - 因为这是一个刚刚被丢弃的虚拟按钮！它也没有标题！
That's why the error was referring to object Exclude something, which is obviously not an object, but the title of the dialog. The close button received that object ID somehow between the close/open stage.
这就是为什么错误是指对象Exclude something，这显然不是一个对象，而是对话框的标题。关闭按钮在关闭/打开阶段之间以某种方式接收到该对象 ID。
http://jsfiddle.net/ycZpQ/7/<- here's a final JS fiddle, with only one dialog initialization and only opening the dialog when needed, which is the most efficient way of using this dialog system when the dialog is as reusable as it should be in this case.
http://jsfiddle.net/ycZpQ/7/<- 这是最后的 JS 小提琴，只有一个对话框初始化，并且只在需要时打开对话框，这是当对话框可重用时使用此对话框系统的最有效方式在这种情况下应该是这样。
Notes about more edits in the code: I made some changes to how the dialog creation looks, mostly semantic, but notice how I was defining the buttons - the buttonsobject is an object with buttons for properties, instead of an array of button objects with properties. A bit more efficient and a bit easier on the eyes.
关于代码中更多编辑的注意事项：我对对话框创建的外观进行了一些更改，主要是语义上的更改，但请注意我是如何定义按钮的 - 该buttons对象是一个带有用于属性的按钮的对象，而不是带有属性的按钮对象数组. 效率更高，眼睛更轻松。
回答by SrikanthGoud Mamindla
I got this issue when a single page used different versions of jquery-ui.css, jquery-ui.jsand jquery.js. To resolve this I just used the same version of the Jquery files
当单个页面使用不同版本的jquery-ui.css,jquery-ui.js和jquery.js. 为了解决这个问题，我只使用了相同版本的 Jquery 文件
回答by Eric
Well, the destroy() method actually unbinds the container from the dialog-class. In other words, it removes the functionality.
好吧，destroy() 方法实际上从对话框类中解除了容器的绑定。换句话说，它删除了功能。
If you want to close the dialog, you want to use the close() method. Check it out in their doc.
如果要关闭对话框，则要使用 close() 方法。在他们的文档中查看。
EDIT: You shall only invoke the destroy() method when you don't ever need to use the dialog again.
编辑：当您不需要再次使用对话框时，您应该只调用 destroy() 方法。
回答by RDK
You need to read about .on jquery method,
你需要阅读.on jquery 方法，
and then try something like this:
然后尝试这样的事情：
$('.dialog-edit').on("click", function(){
$(this).dialog({ .... });
});
On close dialog try
在关闭对话框尝试
$('.dialog-close').on("click", function(){
$(this).dialog("close");
});
P.S. Always use class not id. It's better way
PS 始终使用类而不是 id。这是更好的方法
