JQuery dialog opens 2 dialogs after first use

Im using JQuery dialog and open an iframe inside it in the following way

$('#div1').dialog("destroy");            

if (criteria1== "L") {
    $("#div1").html("<iframe id='dialogFrame1' src='../WebPages/abc.aspx' Height='100%' Width='100%' frameborder='0'></iframe>");
}
else {
    $("#div1").html("<iframe id='dialogFrame2' src='../WebPages/abc1.aspx' Height='100%' Width='100%' frameborder='0'></iframe>");
}

$('#div1').dialog(
  {

      height: 220,
      title: "Title",
      width: 500,
      modal: true,
      beforeclose: function (event, ui) {

          $("#div1").html("");
          $("#div1")[0].innerHTML = "";
      }

  });

$('#div1').parent().appendTo($("form:first"));
$('#div1').dialog('open');

The first time I call dialog("open开发者_开发知识库") it works fine. However, subsequent calls (without a page refresh) show 2 dialogs, 1 a proper one with the controls loaded and another active one that is empty.

Any ideas why?

---

ADD this option

autoOpen: false

$('#div1').dialog("destroy");

criteria1="L";
if (criteria1== "L") {
  $("#div1").html("<iframe id='dialogFrame1' src='../WebPages/abc.aspx' Height='100%' Width='100%' frameborder='0'></iframe>");
}
else {
  $("#div1").html("<iframe id='dialogFrame2' src='../WebPages/abc1.aspx' Height='100%' Width='100%' frameborder='0'></iframe>");
}

$('#div1').dialog({
  autoOpen: false, 
  height: 220,
  title: "Title",
  width: 500,
  modal: true,
  beforeclose: function (event, ui) {
    $('#div1').html("");
    $('#div1')[0].innerHTML = "";
  }
});
$('#div1').dialog('open');

$('#div1').parent().appendTo($("form:first"));

---

$('#div1').parent().appendTo($("form:first"));

i think the above code replicates the content.Change that and test it.

---

This code work well: call 'destroy' in event 'beforeclose'.

function ShowAuditingPopup() {
            $("#divAuditingContainer").dialog("destroy");

            $("#divAuditingContainer").dialog({
                 title: 'Lịch sử thay đổi dữ liệu'
                , autoOpen: true
                , width: 'auto'
                , autoOpen: true
                , closeOnEsc: true
                , modal: true
                , open: function (type, data) {
                    $(this).parent().appendTo($("form:first"));
                }
                , beforeclose: function (event, ui) {
                    $("#divAuditingContainer").dialog("destroy");
                }
            });


            $('#divAuditingContainer').dialog('open');
        }