jQuery on click have to click twice for modal dialog to appear

Question

Im using Dialog. When I click to open Dialog, I always have to click twice. I have tried many many solutions but Its not working.

jQuery(result).on('click', function() {
  jQuery(why).dialog({
    create: function (event, ui) {
      jQuery(".ui-corner-all").css('border-radius','0px !important');
    },
    autoOpen: true,
    title: "Whois Info",
    width: 1170,
    height: 600,
    modal: true,
    buttons: {
      Close: function() {jQuery(this).dialog("close");return false;}
    }
   });
 });

Answer 1

you don't need to initialize the dialog each and every time on the button click. Move the initialization part into document.ready function. Then inside the click function just write code to make the dialog visible.

something like:

$( function() {
jQuery("#id").dialog({
    create: function (event, ui) {
      jQuery(".ui-corner-all").css('border-radius','0px !important');
    },
    autoOpen: true,
    title: "Whois Info",
    width: 1170,
    height: 600,
    modal: true,
    buttons: {
      Close: function() {jQuery(this).dialog("close");return false;}
    }
   });

jQuery(result).on('click', function() {
   jQuery("#id).dialog('open');
});

});