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

Question

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, it 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>

Answer 1

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