Can I place a jQuery UI dialog box in dynamically loaded HTML?

I have the following code for a simple jQuery UI dialog box. When I place this on a webpage, it works beautifully. However, If I call I insert this code dynamically onto a page using an AJAX function, i开发者_如何学JAVAt doesn't work and the dialog div just appears on the page. Is there any way to make it work in dynamically inserted code?

File DialogBox.html:

<script type="text/javascript"> 

$.ui.dialog.defaults.bgiframe = true;
$(function() {
    $("#dialog").dialog();
});

</script> 


<div id="dialog" title="Basic dialog"> 
    <p>
        This is the default dialog which is useful for displaying information. The  
        dialog window can be moved, resized and closed with the 'x' icon.
    </p> 
</div> 

File index.html (calls DialogBox.html):

<script type="text/javascript" src="jquery.js"></script> 

<script type="text/javascript"> 

$.ajax({
url: "DialogBox.html",
success: function(html){
$("#SpanID").html(html);
}
});

</script>

Does this work better for you?

$("#SpanID").load("DialogBox.html");

In addition to being shorter, it should also allow the loaded JavaScript to be run. More info here: http://docs.jquery.com/Ajax/load