title: Open dialog with jquery
body: <p>I have a dialog referenced by <em>$imageDialog</em> and I'm trying to open it with <code>$imageDialog.dialog("open")</code>, but it doesn't work. </p>
  
  <p>The problem is that, by debugging, I've seen the <code>$imageDialog.dialog("open")</code> line executing, but then the open function inside <em>$imageDialog</em> does not execute. It doesn't show any errors and I checked that <em>$imageDialog</em> has the reference well set when executing the <code>$imageDialog.dialog("open")</code>.</p>
  
  <p>Here is the html dialog:</p>
  
  <pre><code>&lt;div class="dialog" id="image-dialog"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>And here is the javascript code:</p>
  
  <pre><code>var selectedImage;
  var $imageDialog = $("#image-dialog");
  
  $imageDialog.dialog({
      autoOpen: false,
      buttons: [
          {
              text: "Cerrar",
              icons: {
                  primary: "ui-icon-close"
              },
              click: function() {
                  $(this).dialog("close");
              }
          }
      ],
      maxHeight: 580,
      modal: true,
      position: { my: "top", at: "top+160" },
      resizable: false,
      title: "Vista de imagen",
      width: 1000,
      close: function() {
          $imageDialog.empty();
      },
      open: function() {
          content += "         &lt;img alt='previsualizacion'" + "src='" + imageSrc + "'&gt;";
  
          $imageDialog.append(content);
      }
  });
  
  function showImage(img) {
      selectedImage = img.src;
      console.log($imageDialog);
      $imageDialog.dialog("open");
  }
  </code></pre>