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中吗？

我改变了我的代码以初始化点击本身，以这种方式在我的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 上添加了一个示例，请检查here

Answer 1

虽然我不确定我是否理解您的初始问题，但从查看您的小提琴中的代码，您可能需要考虑：

当你已经拥有ID时，在你的选择器中省略了类限定符，它会粘在对话框元素上，这样你就可以在<div>中找到DOM <div> }}）
在加载时将{{1}}保存到变量，这样您就可以在不查询DOM的情况下访问它（fiddle v3）

在小提琴的两个更新版本中，如果您正在寻找，则会在第二次单击时打开对话框。希望它有所帮助。

当您尝试解决更通用的情况时，我已在fiddle v4中相应更新了您的示例。使用another fiddle version功能将对话框div保存在按钮上。要打开对话框，请使用保存的对话框。

Answer 2

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

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

然后在某个时候，

handle.dialog("open");

生成多个jquery-UI对话框

2 个答案: