在jQuery对话框中jQuery追加行为奇怪

Question

我有一个jQuery对话框，在其中显示一个表单。如果用户点击“添加更多图片”，即表单显示一个“图片”文件字段，但表单中有一个“picture_fields”div，我添加新字段，但用户可以添加更多点击“添加更多图片“链接。

这一切都很有用，第一次显示带有窗体的对话框，但如果关闭对话框，然后重新打开它，则附加功能不再起作用。您可以单击该链接，但不添加文件字段。我调试了它，它调用了正确的函数，包括append，但它不会像我期待的那样追加它。

这是处理“添加更多图片”我（简单化）的功能，请点击：

/** 
* Add Picture Field Functionality 
*/ 
    $('form a.add_child').live('click', function() { 
     $("#picture_fields").append('<p> File Field Here </p>'); 
     return false; 
    }); 

这是我的对话框处理程序：

/** 
* New Object Button opening modal Dialog 
*/ 
    $('.dialog_form_link').live('click', function() { 
     var $dialog = $('<div></div>') 
      .appendTo('body') 
      .load($(this).attr('href') + ' .entry_form') 
      .dialog({ 
       title: $(this).text(), 
       modal: true, 
       autoOpen: false, 
      show: {effect: 'blind'}, 
      hide: {effect: 'blind'}, 
     }); 

    $dialog.dialog('open'); 

    // prevent the default action, e.g., following a link 
    return false; 
    }); 
}); 

“新建对象的用户点击“按钮（带类”dialog_form_link“），它将新对象表单打开到jquery对话框中。在这个对话框中，他点击“添加图片”链接（类为“add_child”）。第一次打开对话框时效果很好，之后再也不行。它只在我重新加载整个网页后才重新开始工作，但只是一次。

== ==更新我 试图添加关闭选项类似建议：

$('.dialog_form_link').live('click', function() { 
    var $dialog = $('<div></div>') 
     .appendTo('body') 
     .load($(this).attr('href') + ' .entry_form') 
     .dialog({ 
      title: $(this).text(), 
      modal: true, 
     autoOpen: false, 
      width: 900, 
      height: '900', 
      position: 'center', 
      show: {effect: 'fade', duration: 300}, 
      hide: {effect: 'blind', duration: 500}, 
      close: function(ev, ui) { $(this).destroy(); alert("Closed"); } 
     }); 

我也试过close: function(ev, ui) { $(this).close(); }。这两个都会在对话框关闭时调用（我点击X并看到提示），但是在此之后我无法再打开对话框。我得到了灰色叠加层，但没有对话框。我认为这是一个常见的初学者错误（和我是男孩！）jquery对话框没有被正确初始化，所以也许我在这里做了完全错误的事情？我相信autoOpen选项也与此有关，所以我启用并禁用了它，关闭并销毁，但再次没有骰子。我会看看this answer，但同时，如果有人有任何其他建议，我将不胜感激。

Answer 1

好吧，我想通了......

我增加了一个功能，实际上将删除的对话框附加到，像这样的DIV的关闭选项：

接近：功能（ev，ui）{$（'div.dialog'）。remove（）; }

我实际上认为我并没有真的这样做100％的权利（我必须将对话框附加到DIV？），但这个工作，所以我坚持它，直到我变得更加熟练:-)

最终代码：

$('.dialog_form_link').live('click', function() { 
     var $dialog = $('<div class="dialog"></div>') 
      .appendTo('body') 
      .load($(this).attr('href') + ' .entry_form') 
      .dialog({ 
       title: $(this).text(), 
       modal: true, 
//    autoOpen: false, 
       width: 900, 
       height: '900', 
       position: 'center', 
       show: {effect: 'fade', duration: 300}, 
       hide: {effect: 'blind', duration: 500}, 
       close: function(ev, ui) { $('div.dialog').remove(); } 
      }); 

//  $dialog.dialog('open'); 

     // prevent the default action, e.g., following a link 
     return false; 
    }); 

请注意，我也选择了的AutoOpen功能，而不是造成这是真的是我想在这种情况下。

Answer 2

一个粗略的猜测 - 我知道其他人在使用Form标签时没有使用jQuery UI对话框。我认为当您拨打dialog()时，可能会导致整个DIV被移出form标签。这意味着您的选择器form a.add_child将不起作用，因为a.add_child可能不再位于表单中。

请参阅this answer了解将对话框div放回正确位置的代码。

Answer 3

您可以改为添加图片链接为对话框按钮吗？我有一个对话框，我做一些东西，然后将选项附加到选择列表。这个对我有用。

   buttons: 
       { 
        'Add': function() { 
         ... 
         $("#picture_fields").append('<p> File Field Here </p>'); 

        }, 
        'Cancel': function() { 
         $(this).dialog('close'); 
         } 
       }