title: Cannot open JQuery Dialog
body: <p>I have a button in my HTML, once click on the button, I want to open a JQuery Dialog.
  I have a version of code which works fine, but I just want to reorganize the code, seems like there's something wrong with it since the dialog cannot be displayed anymore.</p>
  
  <p>the version that works:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $(function() {
     $('#dialog_trigger').on("click", function() {
         $('#dialog').load('index.php', function() {
            $('#dialog').dialog({
             *********(somehow I must remove 'autoOpen: false' here, otherwise it also stops working) ********
  
                position: 'center',
                width : 480,
                height : 320, 
                modal : true
            });
  
          });
        });
    });
  
  &lt;/script&gt;
  
  &lt;body&gt;
  &lt;button id="dialog_trigger"&gt;Click me&lt;/button&gt;
  &lt;div id="dialog"&gt;&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>the code that doesn't work:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $(function() {
     $('#dialog_trigger').on("click", function() {
         $('#dialog').load('index.php', function() {
            $('#dialog').dialog("open")
         });
      });
  
     $('#dialog').dialog({
      autoOpen: false,
      position: 'center',
      width : 480,
      height : 320, 
      modal : true
     });
  
  });
  
  &lt;/script&gt;
  
  &lt;body&gt;
  &lt;button id="dialog_trigger"&gt;Click me&lt;/button&gt;
  &lt;div id="dialog"&gt;&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Please help me correct it, thanks.</p>