Estoy tratando de implementar un cuadro de diálogo en mi código, pero el cuadro de diálogo solo funciona con un segundo clic la primera vez que se carga la página. Después de eso, funciona bien cada vez que hago clic en el botón.

La primera vez que hago clic en el botón me da el siguiente error:

 Uncaught TypeError: Cannot read property 'call' of undefined at n.(:8000/anonymous function).(anonymous function)._trigger (http://localhost:8000/?package=js:41:23960) at n.(:8000/anonymous function).(anonymous function)._trigger (http://localhost:8000/?package=js:41:5374) at n.(:8000/anonymous function).(anonymous function)._createWidget (http://localhost:8000/?package=js:41:7432) at new n.(:8000/anonymous function).(anonymous function) (http://localhost:8000/?package=js:41:4957) at HTMLDivElement.<anonymous> (?package=js:41) at Function.each (?package=js:36) at i.fn.init.each (?package=js:36) at i.fn.init.n.fn.(:8000/anonymous function) (http://localhost:8000/?package=js:41:6582) at i.fn.init.t.(:8000/anonymous function) [as draggable] (http://localhost:8000/?package=js:41:235499) at n.(:8000/anonymous function).(anonymous function)._makeDraggable (http://localhost:8000/?package=js:41:161342)

¿Me pueden ayudar a entender por qué la primera vez tengo que hacer un doble clic?

 $("#myAlertButton2").click(showDialog1) function showDialog1() { $("#dialog1").dialog({ title: 'Patient Profile Export Tool', close: (event, ui) => { $(this).dialog("destroy"); } }); $("#dialog1").dialog("option", "width", 250); }

 <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.0/jquery-ui.min.js"></script> <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css" /> <div> <h3>Patient Profile Export Tool</h3> <div> <button id='myAlertButton2'>Double Click to Generate Report</button> </div> <div id="dialog1"> <h4>Please Select a Subject</h4> </div> </div>