如何在jQuery UI选项卡中清除对话框

Question

我使用带有通过Ajax的conten的jquery ui选项卡。在content1.html中有一个对话框和一个按钮。 当我选择“Ajax tab1”时，点击“打开”按钮打开dlg_set_awd dialog，关闭此对话框，我选择另一个选项卡，然后再次选择“Ajax tab1”，点击“打开”按钮，打开两个对话框， 。当我选择另一个选项卡时，如何清除对话框？

我下面的代码：

标签文件：

</script> 
    <link type="text/css" href="../demos.css" rel="stylesheet" /> 
    <script type="text/javascript"> 
    $(function() { 
     $("#tabs").tabs(); 
    }); 
    </script> 

HTML：

<div class="demo"> 
    <div id="tabs"> 
     <ul> 
      <li><a href="#tabs-1">Nunc tincidunt</a></li> 
      <li><a href="ajax/content1.html">Ajax Tab 1</a></li> 
      <li><a href="ajax/content2.html">Ajax Tab 2</a></li> 
     </ul> 
     <div id="tabs-1"> 
      <p>ABC</p> 
     </div> 
    </div> 
</div><!-- End demo --> 

content1.html

<script type="text/javascript"> 
     $(document).ready(function(){ 
      $('#dlg_set_awd').dialog({ 
       autoOpen: false, 
       height: 100, 
       width: 400, 
       modal: true, 
       buttons: { 
        'Save': function() { 

        }, 
        Cancel: function() { 
         $('#dlg_set_awd').dialog('close'); 
        } 
       }, 
       close: function() { 
       } 
      }); 

      $('#open').click(function(){ 
       $('#dlg_set_awd').dialog('open'); 
      }); 
     }); 
    </script> 

HTML：

<form id="form1"> 
<table id='dlg_set_awd' title="Set ward for participant"> 
    <tr> 
     <td width="400px" style=" vertical-align:top;"> 
      <div style="float:left; width:90px; padding-right:11px;"> 
       <div style="width:90px;" class="id1">First name</div> 
       <input type='text' id="first_name" style="width:90px" class="ui-widget-content" /> 
      </div> 
      <div style="width:90px; float:left; padding-right:11px;"> 
       <div style="width:90px;" class="id1">Last name</div> 
       <input type='text' id="last_name" style="width:90px" class="ui-widget-content" /> 
      </div> 
     </td> 
    </tr> 
</table> 
<button id='open' type="button">Open dialog</button> 
</form> 

Answer 1

使用此代码结合的Click事件：

$('#open').unbind('click.myNameSpace').bind("click.myNameSpace", function() { 
     if($('#dlg_set_awd').dialog('isOpen')!='true') 
     { 
      $('#dlg_set_awd').dialog('open'); 
     } 
    });