Jqueryui dialog problem with loading new dialog

im using jqueryui dialog but there's a problem upon loading it from other file. example i got

hello.php

 <button class="btn"></button>

 <div class="xxx"></div>

 $(开发者_StackOverflow中文版".btn").click(function(){

     $.post("hi.php",function(e){
         $(".xxx").html(e);
     });
  });

hi.php

<div class="mydialog"></div>
$(".mydialog").dialog();

the problem is when i click the button twice, the dialog will show twice. it will overlap the other dialog.. can we destroy that dialog before creating a new ui when the button has been clicked?

You'll need to check if the same dialog is already open before opening another one.

$('button').live('click', function() {
    if (!$(".mydialog").parents(".ui-dialog").is(":visible")) { //checking is done here
        $('<p class="mydialog">test</p>').dialog();
    }
});

Check working example at http://jsfiddle.net/vm4wQ/3/