DatePicker stops working after a body replacement

DatePicker stops working after a body replacement


Wow, if that sounded tragic it's due to some badass legacy script I'm
dealing with.
Before you tell me that I shouldn't be updating the document's body
like this, let me tell you that I completely agree with you.
Unfortunately this way of updating the page is part of a legacy ajax
implementation that I'm still fighting to get replaced (I could go on
and on about why I can't change that so please just trust me :) )
This is an IE-only site (blergh, I know) but the issue is interesting.
I was able to create a small repro:
(save this as repro.html and open in IE. IE8 is what I'm using)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
     <title>DP issue</title>
    <link type="text/css" href="css/smoothness/jquery-ui-1.7.custom.css"
rel="stylesheet" />
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.7.custom.js"></
script>
</head>
<body>
    <script>
        var loadTime = new Date().toString();
        function loadIframe(){
            $('#myIFrame').attr('src', 'repro.html?d=' + (new Date().getTime
()) );
        }
        function replaceBody(){
            var html = $('#myIFrame').contents().find('body').html();
            $('body').empty().html( html );
            // (1) ---- can't change code above this line ---
            //tried with and without this next line, no diff.
            stuffOnLoad();
        }
    </script>
    Here's a datepicker <input type=text id="mydp" >

    

    Here's an iframe (it's not visible in the real app)

    <iframe id="myIFrame" width="500" height="50%" style="border:solid
2px red;"></iframe>
    <hr>
    Click each button in sequence (remember, only in IE)

    <input type="button" value="1 - Load IFRAME" onclick="loadIframe();" /