Button to open Jquery Dialog is not working

I am playing with Jquery UI

I create a dialog on the fly from a DIV, i gave this DIV and ID and a button to call a closeDialog Function

It works fine as shown on this example

http://jsbin.com/ubovej

The problem I am having, is that if I d load a page THAT contains the BUTTON. The button will not work

as in:

$("<div id='mydialog1'>").dialog({ 开发者_StackOverflow社区
         autoOpen: false, 
         modal: false,
         width: 740, 
         height: 840,
         title: 'Dialog1 = dynamic',
         open: function(e, ui){   
            $(this).load(myUrl);  
         }                        
});  

If this is the button Click Event code then

autoOpen: false,

should be

autoOpen: true,

EDIT: If you don't want it opened til you click the button then:

Do this when you want the dialog created.

var $dialog = $("<div id='mydialog1'>").dialog({ 
     autoOpen: false, 
     modal: false,
     width: 740, 
     height: 840,
     title: 'Dialog1 = dynamic',
     open: function(e, ui){   
        $(this).load(myUrl);  
     }                        
 });

and do this after they click the button (only after the dialog is created)

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

EDIT: Try changing

function closeDialog1(){                                                                                                                
   alert('closing Dialog1');                                                                                                            
   window.parent.$('#mydialog1').dialog('close');                                                                                                     
   return false;                                                                                                                        
}

to

function closeDialog1(){                                                                                                                
   alert('closing Dialog1');                                                                                                            
   $('#mydialog1').dialog('close');                                                                                                     
   return false;                                                                                                                        
}   

Or a better way to do this might be

$("<div id='mydialog1'>").dialog({ 
         autoOpen: false, 
         modal: false,
         width: 740, 
         height: 840,
         title: 'Dialog1 = dynamic',
         open: function(e, ui){   
            $(this).load('dialogtest1a.html');  
         },
         buttons: {
             "Close" : function () {
                  $(this).dialog("close");
             }     
         }                   
});              

Does the button that closes the dialog HAVE TO be in the page you are loading?