title: jQuery append behaving strangely in jQuery dialog
body: <p>I have a jQuery dialog in which I display a form.  The form has a "picture_fields" div in it that I append new fields to if the user clicks on "Add More Pictures", i.e. the form displays with one "Picture" file-field, but the users can add more be clicking the "Add More Pictures" link.</p>
  
  <p>This all works great the first time the dialog with the form in it is displayed, but if you close the dialog, and then re-open it, the append doesn't work anymore.  You can click on the link, but no file field is being added.  I debugged it and it is calling the correct function, including the append, but it just doesn't append it as I was expecting.</p>
  
  <p>This is my (dumbed down) function that handles the "Add More Pictures" click:</p>
  
  <pre><code>/**
  * Add Picture Field Functionality
  */
      $('form a.add_child').live('click', function() {
          $("#picture_fields").append('&lt;p&gt; File Field Here &lt;/p&gt;');
          return false;
      });
  </code></pre>
  
  <p>This is my dialog handler:</p>
  
  <pre><code>/**
  * New Object Button opening modal Dialog
  */
      $('.dialog_form_link').live('click', function() {
          var $dialog = $('&lt;div&gt;&lt;/div&gt;')
              .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;
      });
  });
  </code></pre>
  
  <p>The user clicks on the "New Object" button (with class "dialog_form_link") which opens the New Object Form into the jquery dialog.  In this dialog he then clicks "Add Pictures" link (with class "add_child").  Works great the first time you open the dialog, never works after that.  It only starts working again AFTER I reload the whole webpage, but again only once.</p>
  
  <p>==UPDATE==
  I tried to add a close option like suggested:</p>
  
  <pre><code>$('.dialog_form_link').live('click', function() {
      var $dialog = $('&lt;div&gt;&lt;/div&gt;')
          .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"); }
          });
  </code></pre>
  
  <p>I also tried with <code>close: function(ev, ui) { $(this).close(); }</code>.  Both of these get called on close of the dialog (I hit the X and see the alert) BUT after this I cannot open the dialog anymore.  I get the grey overlay but no dialog.  I believe this is a common beginners mistake (and boy am I!) with jquery dialogs not being initialized properly so maybe I am doing something completely wrong here?  I believe the autoOpen option has something to do with this too, so I enabled and disabled that, with close and destroy, but again, no dice.  I'm gonna have a look at <a href="https://stackoverflow.com/questions/1718640/how-to-recreate-jquery-dialog-after-destroy">this answer</a>, but in the mean time, if anybody has any other suggestions, I will greatly appreciate it.</p>