无法克隆 jQueryUI 对话框

Question

我有一个用户正在添加和编辑书籍列表的页面。你可以移动它们，添加新书，编辑已经存在的书...

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

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

$( "#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 模板并从模板创建新对话框。