在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'); 
         } 
       }