jQuery append странно ведет себя в диалоговом окне jQuery

Question

У меня есть диалоговое окно jQuery, в котором отображается форма. У формы есть div "picture_fields", в которые я добавляю новые поля, если пользователь нажимает кнопку «Добавить больше изображений», т.е. форма отображается с одним файловым полем «Изображение», но пользователи могут добавить больше, Добавить больше фотографий ".

Все это отлично работает при первом отображении диалога с формой в нем, но если вы закроете диалоговое окно, а затем снова откроете его, приложение не будет работать больше. Вы можете нажать на ссылку, но никакое поле файла не добавляется. Я отлаживал его, и он вызывает правильную функцию, включая 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»). Отлично работает при первом открытии диалога, после чего он никогда не работает. Он только начинает работать снова ПОСЛЕ того, как я перезагружаю всю веб-страницу, но снова только один раз.

== UPDATE == Я пытался добавить близкий вариант, как предложил:

$('.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

Грубое предположение - я знаю, что у других людей были проблемы с диалогими jQuery UI, не связанными с тегом формы. Я думаю, когда вы вызываете dialog() fn, это может привести к тому, что весь DIV будет перемещен за пределами тега form. Это означало бы, что ваш селектор form a.add_child не будет работать, потому что a.add_child больше не может быть в форме.

См. this answer для кода, чтобы вернуть диалоговое окно назад в нужное место.

Answer 3

Не могли бы вы сделать ссылку «Добавить изображение» на кнопку диалога? У меня есть диалог, где я делаю некоторые вещи, а затем добавляю варианты в список выбора. Меня устраивает.

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

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