title: Diplay jQueryUI dialog again after it was closed
body: <p>I have a several links on the page and I want to show individual jQuery dialogs for each one. Here is the markup:</p>
  
  <pre><code>&lt;html&gt;
      &lt;body&gt;
          &lt;div class="container"&gt;
              &lt;a href="#" class="delete_link"&gt;delete&lt;/a&gt; &lt;!-- when this link is clicked, dialog should popup --&gt;
              &lt;div class="dialog_box"&gt; &lt;!-- this is the dialog for jquery UI --&gt;
                   Pleasy specify a reson for your action    
                   &lt;textarea rows="5" cols="60"&gt;&lt;/textarea&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="container"&gt;
              &lt;a href="#" class="delete_link"&gt;delete&lt;/a&gt; &lt;!-- when this link is clicked, dialog should popup --&gt;
              &lt;div class="dialog_box"&gt; &lt;!-- this is the dialog for jquery UI --&gt;
                   Pleasy specify a reson for your action    
                    &lt;textarea rows="5" cols="60"&gt;&lt;/textarea&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And the Javascript:</p>
  
  <pre><code>$(document).ready(function() {
      $('.delete_link').click(function() {
          alert('about to show jQuery dialog!');
          var d = $(this).closest('DIV.container').find('DIV.dialog_box').dialog({
              autoOpen: false,
              title: 'You are going to delete a div!',
              buttons: {
                  "Do delete": function() {
                      alert('You have entered:' + $(this).find('textarea').val());
                      $(this).dialog("close");
                      $(this).closest('DIV.container').hide(); //hiding div (primary action)     
                  }
              },
              width: 800
          });
          d.dialog("open");
      });
  });
  </code></pre>
  
  <p>As you can see, links that trigger the event have <code>delete_link</code> class and DIVs that should be jQuery UI dialogs, have <code>dialog_box</code> class. </p>
  
  <p><strong>The problem:</strong> when Dialog is opened and user have pressed "close", it is not possible to open dialog again.</p>
  
  <p>According to google and SO search I'm not the first one with this problem. This post, for example: <a href="http://blog.nemikor.com/2009/04/08/basic-usage-of-the-jquery-ui-dialog/" rel="nofollow">http://blog.nemikor.com/2009/04/08/basic-usage-of-the-jquery-ui-dialog/</a>
  It seems, that dialog should be somehow initialized before <code>click()</code> action, but in all solutions, there is only one dialog on page, with assigned id - I just cannot apply this to my situation.</p>
  
  <p>I've tried this, but it does not work:</p>
  
  <pre><code>$(document).ready(function() {
      //initializing
      $('DIV.dialog_box').dialog({
          autoOpen: false,
          title: 'You are going to delete a div!',
          buttons: {
              "Do delete": function() {
                  alert('You have entered:' + $(this).find('textarea').val());
                  $(this).dialog("close");
                  $(this).closest('DIV.container').hide(); //hiding div (primary action)     
              }
          },
          width: 800
      });
  
      $('.delete_link').click(function() {
          alert('about to show jQuery dialog!');
          $(this).closest('DIV.container').find('DIV.dialog_box').dialog("open");
      });
  });
  </code></pre>
  
  <p>I have prepeared demo at jsFiddle: <a href="http://jsfiddle.net/NQmhk/" rel="nofollow">http://jsfiddle.net/NQmhk/</a>
  No jQUery UI css there, but I hope it will be enough to understand the problem.</p>
  
  <p>Any help will be greatly appreciated.</p>