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'); 
     }) 

    }