IE9 RC problem with JQUI dialog

IE9 RC problem with JQUI dialog

This is a very strange problem. I have a page with:

  • -- a div containing a link
  • -- another link that, when clicked, creates a new dialog window who's content is pulled from the div

The problem is that in IE9 the dialog can be created and closed, and then never opened again. What's really happening is that the whole page seems to freeze (not the browser, just the screen). I don't mean it crashes, I mean it just doesn't draw any new changes (like the dialog being opened a 2nd time). After you click to open the dialog again and nothing seems to happen, you can move the mouse around on the screen and the cursor changes when you mouse over the area where the dialog is (even though you can't see it).

Here are the strange parts. First, if you take the link out of the div and just make it some plain text, the problem goes away. Second, I created a demonstration of the problem at jsbin.com to go with this post, with the  exact same source code, yet the problem doesn't happen there. It only happens when the source code is loaded from my domain.

Here's the jsbin:  http://jsbin.com/atohi4
and the same code on my domain:  http://www.nicepricefavors.com/test/test.htm
and here's the code itself if you want to test it on your domain:
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
  2. <html lang="en-US">
  3. <head>
  4. <title>test</title>
  5. <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> 
  6. <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js"></script> 
  7. <link type="text/css" rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/redmond/jquery-ui.css"> 

  9. <script type="text/javascript">
  10. $(document).ready(function(){
  11. $(".openDialog").click(function(event){
  12. event.preventDefault();
  13. if ( !$("#dialogWindow").length ) {
  14. $("body").append("<div id='dialogWindow' title='Dialog Window'></div>");
  15. $("#dialogWindow").html( $("#dialogContent").html() ).dialog();
  16. } else {
  17. $("#dialogWindow").dialog( "open" );
  18. }
  19. return false;
  20. });
  21. });
  22. </script>
  23. </head>
  24. <body> 

  26. <p><a href="javascript:void(0);" class="openDialog">open dialog window</a></p>
  27. <div id="dialogContent"><a href="javascript:void(0);">link</a></div>

  29. </body>
  30. </html>

Can anyone verify the problem so I know it's not just my machine, and maybe suggest some ways to fix it?