title: jQuery UI Dialog: Dialog Element Disappearing from the DOM
body: <p>I'm working on a project and I am attempting to create a modal dialog "pop-up" to capture data in a form.  I haven't worked with jQuery UI's Dialog widget previously, but I've worked with others and it seemed straight forward.</p>
  
  <p>I created the following very simple code snippet to test as I went along:</p>
  
  <pre><code>&lt;div class="app-email"&gt;
      &lt;div&gt;
          &lt;a href="#"
             class="app-email-opener"&gt;
              Click to add or edit your e-mail settings.
          &lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="app-email-modal"&gt;
          Oh, Hai.
      &lt;/div&gt;
  
  &lt;/div&gt;
  
  $('.content').on({
      click: function () {
          console.log('I was totes clicked.');
  
          var parent = $(this).parents('.app-email');
          console.log(parent);
  
          var target = parent.find('.app-email-modal');
          console.log(target);
  
          $(target).dialog('open');
      }
  }, '.app-email-opener');
  
  $('.app-email-modal').dialog({
      autoOpen: false,
      modal: true,
      show: false
  
  });
  </code></pre>
  
  <p>For reference: the class 'content' is a higher level block to catch delegated events without having to go all the way up the DOM.</p>
  
  <p>The issue I'm running into is that the div with class="app-email-modal" seems to flash onto the page and then disappear from the DOM completely.  jQuery, therefore, isn't able to find it and do anything because at that point it simply doesn't exist.</p>
  
  <p>The overall project is in ASP.NET MVC 4, using Visual Studio 2013.</p>
  
  <p>Any information would be greatly appreciated.</p>