jQuery UI Dialog behaves unpredictably
The jQuery UI dialog drives me up the walls.  To the best of my understanding, here's how it works:

When you do `$('#myDialog').dialog({...})`, it copies the #myDialog element and moves it inside this bizarre widget thing at the bottom of your body tag.  This is crazy!  It will duplicate possibly unique DOM elements (with ids) when it does this.

So what I'm trying to do is make it behave in a predictable way when I refresh the HTML of the original element (#myDialog).  If I do this dynamically, sometimes the dialog doesn't open any more:

http://jsfiddle.net/t67y7/3/

Or sometimes the dialog opens with the old HTML (because it's cached at the bottom of the page that way).  What is up with this?
jQuery UI Dialog behaves unpredictably
===

The jQuery UI dialog drives me up the walls.  To the best of my understanding, here's how it works:

When you do `$('#myDialog').dialog({...})`, it copies the #myDialog element and moves it inside this bizarre widget thing at the bottom of your body tag.  This is crazy!  It will duplicate possibly unique DOM elements (with ids) when it does this.

So what I'm trying to do is make it behave in a predictable way when I refresh the HTML of the original element (#myDialog).  If I do this dynamically, sometimes the dialog doesn't open any more:

http://jsfiddle.net/t67y7/3/

Or sometimes the dialog opens with the old HTML (because it's cached at the bottom of the page that way).  What is up with this?