title: How do I close a dialog using jQuery?
body: <p>I am using the code below to create a jQuery UI Dialog widget dynamically:</p>
  
  <pre><code> $(function () {
          var Selector = $("a:contains('sometext')");
          $(Selector).bind('click', function () {
              var NewDialog = "&lt;div dir=rtl id='MenuDialog'&gt;&lt;/div&gt;";
              var DialogContetn = '&lt;div dir=rtl &gt;&lt;table width=100%&gt;&lt;tr&gt;&lt;td&gt;&lt;textarea id="txtRequestContent" cols="30" rows="2"&gt;&lt;/textarea&gt;&lt;/td&gt;&lt;td&gt;&lt;table&gt;&lt;tr&gt;&lt;td&gt;&lt;input id="btnSendEditionRequest" type="button" value="Send" /&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;input id="btnCloseDialog" type="button" value="Cancel" /&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/div&gt;';
              $('body').append(NewDialog);
              $('#MenuDialog').html(DialogContetn);
              $('#MenuDialog').hide();
              $('#MenuDialog').dialog({ modal: true, title: "title", show: 'clip', hide: 'clip' });
              $("#btnCloseDialog").live('click', function () {
                  $("#MenuDialog").dialog('close');
              });
              return false;
          });
      });
  </code></pre>
  
  <p>First time it loads, the jQuery Dialog works correctly and when I click on the btnCloseDialog the jQuery Dialog closes successfully.</p>
  
  <p>However, after that, the btnCloseDialog no longer closes the dialog.  Why is this happening?</p>
  
  <p><strong>Update</strong></p>
  
  <p>I put my code out on a <a href="http://jsfiddle.net/cnrag/" rel="nofollow noreferrer">jsfiddle</a>. </p>
  
  <p>This is strange behavior because the button closes the dialog properly in the jsFiddle,  but not on the dialog in my project.</p>