jQuery UIダイアログを閉じることができません

Question

jQuery UIで遊んでいます。ユーザーがbody要素をクリックすると、ダイアログボックスを動的に表示したかったのです。ダイアログが表示されている間に、私はそれを閉じることはできません。また、ページ読み込み時にダイアログが表示された場合は、閉じることができます。

$("body").click(function(e){ 
    $("#dialog").dialog({ 
     title:"Title here", 
     buttons:{ 
      Update:function(){$(this).dialog("close");}, 
      Cancel:function(){$(this).dialog("close");} 
     } 
    }); 
}); 

JSBin

任意のアイデアは、私が何をしないのですか？

Answer 1

これはあなたを助けるかもしれません。私たちは私たちがクリックした要素は、当社の$(dialog)

$("body").click(function(e) { 
 
    if ($(e.target).find('#dialog').length !== 0) { 
 
    $("#dialog").dialog({ 
 

 
     title: "Tistle here", 
 
     buttons: [{ 
 
      text: "Update", 
 
      click: function() { 
 
      $("#dialog").dialog("close"); 
 
      } 
 
     }, 
 
     { 
 
      text: "close", 
 
      click: function() { 
 
      $("#dialog").dialog("close"); 
 
      } 
 
     } 
 
     ] 
 
    }); 
 
    } 
 
});

body { 
 
    height: 100vh; 
 
    background-color: red; 
 
}

<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" /> 
 
<script src="https://code.jquery.com/jquery-1.11.3.js"></script> 
 
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
 

 
<div id="dialog"></div>