jQuery的对话文本只消失第二次开盘

Question

我有以下的jQuery代码，弹出一个对话框。它第一次正常工作。但是，当对话框关闭时，我再次打开它，对话框文本区域为空（仅显示文本），只有三个按钮。现在，如果我再次打开它（第三次，第四次...），一切都很好（文本显示）。从名称中可以看出，通过单击按钮来触发弹出对话框的函数buttonClicked（）。所以任何人都有任何线索？

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
<link rel="stylesheet" href="/resources/demos/style.css"> 
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 

     function buttonClicked() { 
      var dialog = $("#dialog").dialog({ 
       modal: true, 
       autoOpen: false, 
       buttons: { 
        "Cancel": function() { 
         $(this).closest('.ui-dialog-content').dialog('close'); 
        }, 
        "Button2": function() { 
         // do something 
         $(this).closest('.ui-dialog-content').dialog('close'); 
        }, 
        "Button1": function() { 
         ... // do something 
         $(this).closest('.ui-dialog-content').dialog('close'); 
        } 
       } 
      }); 

      dialog .dialog("open"); 
     } 


      <div id = "dialog" name="dialog" style="display:none; "> 
      <style> 
      .ui-dialog-titlebar-close .ui-icon-closethick { 
       position: relative !important; 
       margin-top: -9px !important; 
       margin-left: -16px !important; 
      } 
      </style> 
      <p>I am the text shown in the dialog!!</p></div> 

Answer 1

$(function() { 
     $("#dialog").dialog({ 
      modal: true, 
      autoOpen: false, 
      buttons: { 
       "Cancel": function() { 
        $(this).closest('.ui-dialog-content').dialog('close'); 
       }, 
       "Button2": function() { 
        // do something 
        $(this).closest('.ui-dialog-content').dialog('close'); 
       }, 
       "Button1": function() { 
        ... // do something 
        $(this).closest('.ui-dialog-content').dialog('close'); 
       } 
      } 
     }); 
     $('#yourBtn').click(function(){ 
      $("#dialog").dialog('open'); 
     }) 

    }