无法克隆jQueryUI对话框

Question

我有一个用户正在添加和编辑图书清单的页面。你可以移动它们，添加新书，编辑那里的书籍......

要添加或编辑每本书，会弹出一个对话框，其中包含一个包含多个输入字段的表单：标题，作者，流派等。我还有Watermark插件将默认文本放入每个字段中。

在每本书保存回主列表并关闭对话框之后，不是迭代并重置每个字段，为了让表格为下一本书做好准备，我觉得它更容易只是每次使用表单的克隆，然后在每次保存后只丢弃克隆：

$( "#addEditBook" ).click(function() {
$("#bookForm").clone().removeAttr("id").attr("id", "clonedBookForm").insertAfter("#bookForm");
$( "#clonedBookForm" ).dialog( "open" );
return false;
});

在FireBug中，我可以看到#clonedBookForm正在创建。它与它下面的#bookForm相同。

但下一行.dialog( "open" );会抛出此错误：

uncaught exception: cannot call methods on dialog prior to initialization; attempted to call method 'open'

注意：我知道

$( "#clonedBookForm" ).dialog({
autoOpen: false,
modal: true,
resizable: false,
draggable: false,
etc., etc.

...有效，因为它可以与原始#bookForm一起使用。关于未被克隆的事件的事情？

我很乐意把这个整理好，因为我想像扔掉的东西可以节省时间......

提前致谢！

Answer 1

当您使用

初始化时，您克隆的bookForm对话框包装在另一个容器中

$( "#bookForm" ).dialog({
autoOpen: false,
modal: true,
resizable: false,
draggable: false,
etc., etc.

构造。然后您将克隆bookForm克隆仅包装内容，而不使用主包装器。这就是你没有成功的原因。尝试使用jQuery模板并从模板创建新对话框。