Jqueryダイアログモーダルが閉じない

Question

「保存」または「キャンセル」をクリックしたときに閉じないダイアログモーダルがあります。私はjQuery UI's official demo pageと比較して、なぜこれが動作しないのか分からないようです。ここで

は私が持っているものです。

$(function() { 
      $("#DetailsWindow").dialog({ 
       autoOpen: false, 
       resizable: false, 
       height: 500, 
       width: 600, 
       modal: true, 
       title: 'Appointment Details', 
       buttons: { 
        "Save": function() { 
         $(this).dialog("close"); 
        }, 
        "Cancel": function() { 
         $(this).dialog("close"); 
        } 
       } 
      }); 

      $('button').click(function() { 
       $("#DetailsWindow").dialog("open"); 
      }); 
     }); 

HTML：

<button>A button</button> 
     <div id="DetailsWindow"> 
      <h3>Title</h3> 
      <span>Some Text</span> 
     </div> 

Answer 1

あなた$('button')クエリがより制限する必要があり、それ以外の場合は、jQueryのダイアログの中にあるものを含むページ上のすべての<button>タグを、一致しましたそれが開かれ続ける原因となります。

私はあなたのメインボタンにクラスを追加することをお勧め：

<button class="open-details">A button</button> 

をその後に自分のJavaScriptを変更します。

$('button.open-details').click(function() { 
    $("#DetailsWindow").dialog("open"); 
}); 

Answer 2

使用してみてください：

$(this).dialog('destroy').remove(); 

の代わりに：

$(this).dialog("close");