Question

I have an html with a jquery UI dialog.
I then change the div containing the dialog.
But the content of the dialog does not change.
I want to be able to change the dialog and its containing div together.
If i change only the dialog div it works as expected but that is not what i need.

Example code:
http://jsfiddle.net/JpLzh/13/

The text inside the dialog should change from ‘original’ to ‘new’ but it does not.
The text outside the dialog does change from ‘main’ to ‘altered main’.

What am i doing wrong, and how can i overcome this problem ?

EDIT
I need the dialog to work even before the change take place. the change can happen long time after the html is created.

the html

<div id="main">
main
<br>
<button id="opener">Open Dialog</button>
<div id="dialog">
    original
</div>
</div>
<script>
$( "#dialog" ).dialog({
            autoOpen: false,
            height: 500,
            width: 800,
            modal: true,
            resizable:false,
            draggable:true,
});

$( "#opener" ).click(function() {
  $( "#dialog" ).dialog( "open" );
});
</script>

the onload javascript

$('#main').html('<div id="main">altered main<br><button id="opener">Open Dialog</button><div id="dialog">new</div></div>');
$( "#dialog" ).dialog({
            autoOpen: false,
            height: 500,
            width: 800,
            modal: true,
            resizable:false,
            draggable:true,
});

$( "#opener" ).click(function() {
  $( "#dialog" ).dialog( "open" );
});

Answer 1

I found a solution.
Looks like i cant change the dialog with its containing div because it is already a dialog by the .dialog() method and when i change the containing html it does not affect the already created dialog.

the solution i found was to destroy the old dialog using the .destroy() method and then create a new one from the new altered html.

my solution:
http://jsfiddle.net/JpLzh/12/

<div id="main">
main
<br>
<button id="opener">Open Dialog</button>
<button id="changer">Change div</button>
<div id="dialog">
    original
</div>
</div>
<script>
$( "#dialog" ).dialog({
            autoOpen: false,
            height: 500,
            width: 800,
            modal: true,
            resizable:false,
            draggable:true,
});

$( "#opener" ).click(function() {
  $( "#dialog" ).dialog( "open" );
});
</script>


function change_div()
{
$( "#dialog" ).dialog( "destroy" );
$('#main').html('<div id="main">altered main<br><button id="opener">Open Dialog</button><div    id="dialog">new</div></div>');

$( "#dialog" ).dialog({
            autoOpen: false,
            height: 500,
            width: 800,
            modal: true,
            resizable:false,
            draggable:true,
});

$( "#opener" ).click(function() {
  $( "#dialog" ).dialog( "open" );
});
}


$( "#changer" ).click(function() {
  change_div();
});