Unable to close jQuery UI Dialog when clicking outside

I want to set the dialog box to close when clicking outside of it but every approach I've tried doesn't work.

I think that the problems occurs because the element that triggers the dialog doesn't exists when loading the page.

HTML:

<div class = "photoContainer"></div>
<div id = "dialog"><div id="dialogText"></div></div>

For the JS, I perform an ajax call, and if it succeed I create a table grid with images within photoContainer. Each photo belongs to class photo.

The relevant JS:

createGrid(animalsData);
$(".photoContainer").on('click', '.photo', function(){
                createDialog(animalsData[this.id]);
})

createDialog:

$("#dialog").dialog({
    title: `${animal.name}`,
    modal: true,
    open: function(event, ui){ 
    $('.ui-widget-overlay').bind('click', function()
    { 
        $("#dialog").dialog('close'); 
    });}
})

$("#dialog").position({
    my: "center",
    at: "center",
    of: "window"
})

I've also tried:

$("#dialog").dialog({
    title: `${animal.name}`,
    clickOutside: true,
    clickOutsideTrigger: ".photo"
})

$("#dialog").position({
    my: "center",
    at: "center",
    of: "window"
})

I thought that maybe photo isn't the trigger but photoContainer doesn't help too.

Bind the click to the overlay and call close.

$("#dialog").dialog({
  title: 'Hello',
  modal: true,
});

$("body").on("click", "div.ui-widget-overlay", function() {
  $("#dialog").dialog('close');
});

<link href="https://code.jquery.com/ui/1.13.1/themes/south-street/jquery-ui.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.min.js" integrity="sha256-eTyxS0rkjpLEo16uXTS0uVCS4815lc40K2iVpWDvdSY=" crossorigin="anonymous"></script>


<div id="dialog">
  <img src="http://placekitten.com/200/300" />
</div>