4

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:

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

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.

This is what I have set up: http://jsfiddle.net/ycZpQ/

4

4 回答 4

4

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

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

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

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

因此，我将逐步解决解决方案，在弄清楚这一点的同时，我还发现您的代码存在一些主要是语义或不良实践的其他问题，我也会解决它们。

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

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

接着：

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

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

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

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

现在导致错误的问题是你给对话框一个标题的部分：

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

^ 在这里，因为按钮是关闭按钮，你试图解决它的标题而不是“排除”按钮，例如，导致错误 - 因为这是一个刚刚被丢弃的虚拟按钮！它也没有标题！

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

http://jsfiddle.net/ycZpQ/7/ <- 这是一个最终的 JS fiddle，只有一个对话框初始化，并且只在需要时打开对话框，这是在对话框可重用时使用此对话框系统的最有效方式在这种情况下应该如此。

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

于 2013-07-01T08:48:09.363 回答
1

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

于 2015-11-19T02:53:08.067 回答
0

您需要阅读.on jquery 方法，

然后尝试这样的事情：

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

在关闭对话框尝试

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

PS 始终使用类而不是 id。这是更好的方式

于 2013-07-01T08:47:30.147 回答
0

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

如果要关闭对话框，则需要使用 close() 方法。在他们的文档中查看。

编辑：您只应在不需要再次使用对话框时调用 destroy() 方法。

于 2013-07-01T08:49:13.200 回答