生成多个jquery-UI对话框

Question

我已经将我的jquery对话框内容放在div中。 但是每当我以这种方式初始化对话框时：

$(".uof_add_form").dialog({
  autoOpen : false,
  height : 500,
  width : 600,
  modal : true,
  buttons : {
   "Done" : function() {
    $(this).close();
  }
  }
});

内容已从我的div中删除。 因此，我不能使用

$("#new_form").on("click",".add_level", function(){
        var wrapper_data = $(this).parent().parent().parent().parent();
        wrapper_data.find(".uof_add_form").dialog("open");

});

打开我的对话框。

由于我的内容是动态生成的，因此我需要使用$(this) 。

有什么办法可以将我的内容保留在div中？

我更改了代码以在执行display:none的点击本身上初始化display:none通过这种方式，我的div上display:none ：

$("#new_form").on("click",".add_level", function(){
    var wrapper_data = $(this).parent().parent().parent().parent();
    wrapper_data.find(".add_level_pop").dialog({autoOpen : true, height : 500,width : 600,modal : true, buttons : {   "Done" : function() {  $(this).dialog('close'); } } });

});

该对话框在第一次单击时打开，但在第二次单击时不会触发该对话框，因为在初始化对话框时内容已转移到其他位置。

我还在jsfiddle上添加了示例，请在此处检查

Answer 1

尽管我不确定我是否理解您的最初问题，但是通过查看小提琴中的代码，您可能需要考虑：

• 当您已有ID时，请在选择器中省略类限定符，该ID会粘贴在dialog元素上，因此您始终可以在DOM找到<div> （ 小提琴v3 ）
• 将<div>保存到加载时的变量中，因此您无需查询DOM就可以访问它（ fiddle v4 ）

在您的小提琴的两个更新版本中，如果您正在寻找该对话框，则单击该对话框即可。 希望能帮助到你。

---

当您尝试解决更一般的情况时，我在另一个小提琴版本中相应地更新了您的示例。 对话框div使用.data()函数保存在按钮上。 要打开对话框，请使用保存的对话框。

Answer 2

使用.dialog()的返回值作为句柄：

var handle = $(".uof_add_form").dialog({
 [...]
});

然后在某个时候

handle.dialog("open");