title: Change html that contain a jQuery dialog
body: <p>I have an html with a jquery UI dialog.
  I then change the div containing the dialog.<br>
  But the content of the dialog does not change.
  I want to be able to change the dialog and its containing div together.<br>
  If i change only the dialog div it works as expected but that is not what i need.</p>
  
  <p>Example code:
  <a href="http://jsfiddle.net/JpLzh/13/" rel="nofollow">http://jsfiddle.net/JpLzh/13/</a></p>
  
  <p>The text inside the dialog should change from 'original' to 'new' but it does not.<br>
  The text outside the dialog does change from 'main' to 'altered main'.</p>
  
  <p>What am i doing wrong, and how can i overcome this problem ? </p>
  
  <p><strong>EDIT</strong><br>
  I need the dialog to work even before the change take place. the change can happen long time after the html is created.</p>
  
  <p>the html</p>
  
  <pre><code>&lt;div id="main"&gt;
  main
  &lt;br&gt;
  &lt;button id="opener"&gt;Open Dialog&lt;/button&gt;
  &lt;div id="dialog"&gt;
      original
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;script&gt;
  $( "#dialog" ).dialog({
              autoOpen: false,
              height: 500,
              width: 800,
              modal: true,
              resizable:false,
              draggable:true,
  });
  
  $( "#opener" ).click(function() {
    $( "#dialog" ).dialog( "open" );
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>the onload javascript</p>
  
  <pre><code>$('#main').html('&lt;div id="main"&gt;altered main&lt;br&gt;&lt;button id="opener"&gt;Open Dialog&lt;/button&gt;&lt;div id="dialog"&gt;new&lt;/div&gt;&lt;/div&gt;');
  $( "#dialog" ).dialog({
              autoOpen: false,
              height: 500,
              width: 800,
              modal: true,
              resizable:false,
              draggable:true,
  });
  
  $( "#opener" ).click(function() {
    $( "#dialog" ).dialog( "open" );
  });
  </code></pre>