title: How to recreate jquery dialog after destroy
body: <p>I'm creating three modal dialogs on page load (using <code>$(document).ready(function() {</code>). I create these dialogs by calling a <code>setDialogWindows()</code> method, and pass it the div for the dialog. Dialog creation code is below:</p>
  
  <pre><code>function setDialogWindows($element) {
   $element.dialog({
    autoOpen: false,
    modal: true,
    show: 'blind',
    hide: 'blind',
    width: 600,
    resizable: false,
    buttons: {
     Cancel: function() {
      $(this).dialog('destroy');
     },
     'Save': function() {
      $(this).dialog('close');
     }
    }
   });
  }
  </code></pre>
  
  <p>I'll spare you the dialog html, but there is some jquery drag/drop functionality that I want to be completely reset when the user clicks Cancel. Hence the <code>$(this).dialog('destroy')</code>. However, when I click the link again to open the dialog box, it doesn't show up. I realize this is because I haven't re-inited it, but I really can't do that because the dialogs are created on page load. I tried adding a recursive call of sorts to the Cancel function as such:</p>
  
  <pre><code>   Cancel: function() {
      $(this).dialog('destroy');
      setDialogWindows($element);
     },
  </code></pre>
  
  <p>But that doesn't work -- still nothing opens when I click the link that should open it. Is there a way to just recreate the dialog box? Any ideas on where I should be re-initializing the dialog if the only place I do it now is on document.ready?</p>
  
  <p>Thanks.</p>