JQuery UI Dialog – Not working at runtime

Hello guys,

I have a JS script that calls jquery ui dialog. The script is registered as follows:

wp_register_script('multireg_coda_registrazioni_js', MULTIREG_URL.'js/frontend_coda_registrazioni.js', array('jquery', 'jquery-ui-mouse', 'jquery-ui-dialog', 'jquery-effects-core', 'jquery-effects-blind'));

wp_enqueue_script('multireg_coda_registrazioni_js');

Infact, all is loaded in the correct order:

<script type='text/javascript' src='https://*******/wp-includes/js/jquery/jquery.js?ver=1.8.3'></script>

....

<script type='text/javascript' src='https://*******/wp-includes/js/jquery/ui/jquery.ui.core.min.js?ver=1.9.2'></script>
<script type='text/javascript' src='https://*******/wp-includes/js/jquery/ui/jquery.ui.widget.min.js?ver=1.9.2'></script>
<script type='text/javascript' src='https://*******/wp-includes/js/jquery/ui/jquery.ui.mouse.min.js?ver=1.9.2'></script>
<script type='text/javascript' src='https://*******/wp-includes/js/jquery/ui/jquery.ui.sortable.min.js?ver=1.9.2'></script>

....

<script type='text/javascript' src='https://*******/wp-includes/js/jquery/ui/jquery.ui.resizable.min.js?ver=1.9.2'></script>
<script type='text/javascript' src='https://*******/wp-includes/js/jquery/ui/jquery.ui.draggable.min.js?ver=1.9.2'></script>
<script type='text/javascript' src='https://*******/wp-includes/js/jquery/ui/jquery.ui.button.min.js?ver=1.9.2'></script>
<script type='text/javascript' src='https://*******/wp-includes/js/jquery/ui/jquery.ui.position.min.js?ver=1.9.2'></script>
<script type='text/javascript' src='https://*******/wp-includes/js/jquery/ui/jquery.ui.dialog.min.js?ver=1.9.2'></script>
<script type='text/javascript' src='https://*******/wp-includes/js/jquery/ui/jquery.ui.effect.min.js?ver=1.9.2'></script>
<script type='text/javascript' src='https://*******/wp-includes/js/jquery/ui/jquery.ui.effect-blind.min.js?ver=1.9.2'></script>
<script type='text/javascript' src='https://*******/wp-content/plugins/wp-multireg/js/frontend_coda_registrazioni.js?ver=3.5.2'></script>

Html:

<div id="multireg_coda_registrazioni_dialog_form" title="Create new user">
  <p class="validateTips">All form fields are required.</p>

  <form>
  <fieldset>
    <label for="name">Username</label>
    <input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all">
    <label for="password">Password</label>
    <input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all">
  </fieldset>
  </form>
</div>

In the script:

jQuery(document).ready(function() {

	jQuery("#multireg_coda_registrazioni_dialog_form").dialog({
	    autoOpen: false,
	    height: 300,
	    width: 350,
	    modal: true,
	    buttons: {
	      "Test": function() {

	      },
	      Cancel: function() {
	        jQuery( this ).dialog( "close" );
	      }
	    },
	    close: function() {
	    }
	});

	jQuery("#multireg_coda_registrazioni_dialog_form").dialog();

});

All work but if I try to remove:

jQuery("#multireg_coda_registrazioni_dialog_form").dialog();

and insert it to a function called when a click on a button is done, or try to call it via console, I receive the following error:

TypeError: Object [object Object] has no method ‘dialog’

Why? How to solve?