load form con jquery

[maliba]

Ho girato per mari e monti prima di ricorrere nuovamente al vostro aiuto. Spero abbiate voglia di aiutarmi.

L'idea è quella di richiamare un form con load di jquery:

jQuery('#div_form_modifica_contatti').load('php/profilo/modifica_recapiti.php #fonte_form_dati_contatto');

Fin quì è tutto ok. Il form viene letto regolarmente!
Il fatto che mi fa impazzire ormai da diversi giorni è il seguente:

	jQuery("#btn_modifica_contatti").click(function(){
	 	event.preventDefault();
		jQuery("#div_form_modifica_contatti").show('slow');
	 	jQuery("#dati_contatto").hide('slow');
	 	jQuery("#btn_modifica_contatti").hide('slow');
	 });

Quello che vorrei ottenere è nascondere il div dati_contatto ed il pulsante btn_modifica_contatti al click del pulsante btn_modifica_contatti.
Il type di btn_modifica_contatti l'ho impostato prima come button ma non succede assolutamente niente, poi ho provato con submit e mi invia il form. Questo mi ha indotto a pensare che non viene assolutamente riconosciuto l'id del pulsante in questione. Se monto il form sulla pagina che invia la richiesta load funziona tutto alla perfezione. Sono veramente disperato.

<div id="fonte_form_dati_contatto">
<form id="modifica_contatti" class="col-lg-12 form-horizontal" action="#" method="post">
<fieldset>


<!-- Prepended text-->
<div class="row form-group">
  
  <div class="col-md-12">
  
  <div class="row">
  	
    <div class="col-md-6"><!--Colonna input sx-->
    	<div class="row">
          <label class="control-label col-md-4" for="telcasa"><i class="iconsweets-phone"></i>Casa: </label>
          <div class="col-md-8 input-group input-group-sm">
              <input id="tel_casa" name="tel_casa" class="form-control" placeholder="" type="int" value="<?php echo $row_risultati['tel_casa']; ?>">
          </div>
        </div>
    	<div class="row">
          <label class="control-label col-md-4" for="telcasa"><i class="iconsweets-battery"></i>Ufficio: </label>
          <div class="col-md-8 input-group input-group-sm">
              <input id="tel_ufficio" name="tel_ufficio" class="form-control" placeholder="" type="int" value="<?php echo $row_risultati['tel_ufficio']; ?>">
          </div>
        </div>
    </div><!--Fine input sx-->
  
    <div class="col-md-6"><!--Colonna input dx-->
    	<div class="row">
          <label class="control-label col-md-4" for="telcasa"><i class="iconsweets-mobile"></i>Cellulare: </label>
          <div class="col-md-8 input-group input-group-sm">
              <input id="cell" name="cell" class="form-control" placeholder="" type="int" value="<?php echo $row_risultati['cell']; ?>">
          </div>
        </div>
    	<div class="row">
          <label class="control-label col-md-4" for="telcasa"><i class=" iconsweets-mail"></i>E-mail: </label>
          <div class="col-md-8 input-group input-group-sm">
              <input id="mail" name="mail" class="form-control" placeholder="" type="text" value="<?php echo $row_risultati['email']; ?>">
          </div>
        </div>
    </div><!--Fine input dx-->
  </div>


    	<div class="row">
        <div class="control-group">
          <div class="modal-footer">
            <button id="doublebutton-0" name="doublebutton-0" class="btn btn-success btn-xs">Salva</button>
            <button id="chiudi_modifica_contatti" name="" class="btn btn-danger btn-xs" type="button">&nbsp;Esci</button>
          </div>
        </div>
        </div>


</fieldset>
</form>
</div>
</div>
</div>

[KillerWorm]

Scusa ma questo btn_modifica_contatti dove sta esattamente?

Non ho capito molto ma a naso ti direi di provare così:

    jQuery("body").on("click", "#btn_modifica_contatti", function(){
        event.preventDefault();
        jQuery("#div_form_modifica_contatti").show('slow');
        jQuery("#dati_contatto").hide('slow');
        jQuery("#btn_modifica_contatti").hide('slow');
     });

[maliba]

$risolto
Grazie mille e complimenti per l'intuito. Avevo sbagliato a copyncollare il codice. Quello che avevo postato era il codice funzionante. In effetti grazie alle tue indicazioni ho solo dovuto cambiare gli id.

	 //nascondi il div contenente il form 
	jQuery("body").on("click", "#chiudi_modifica_contatti", function(){
        event.preventDefault();
        jQuery("#div_form_modifica_contatti").hide('slow');
        jQuery("#dati_contatto").show('slow');
        jQuery("#btn_modifica_contatti").show('slow');
     });

Saresti così gentile da spiegarmi la differenza tra "jQuery("#btn_modifica_contatti").click(function(){" e "jQuery("body").on("click","#btn_modifica_contatti",function(){"

Comunque grazie di cuore

[KillerWorm]

Figurati.
Sostanzialmente il metodo click() (nel tuo caso) applica la funzione (come gestore dell'evento click) all'elemento restituito direttamente dal selettore. Perché tale metodo funzioni è quindi necessario che l'elemento stesso sia presente nel momento in cui il metodo è applicato, e che tale elemento non venga in alcun modo "distrutto".
Nel tuo caso specifico, l'elemento #chiudi_modifica_contatti, sul quale usi quel metodo, viene praticamente creato, o comunque distrutto prima di essere ricreato, nel momento in cui usi il load() per caricare il contenuto dentro il form (in cui è compreso proprio l'elemento in questione).
Per questo motivo il metodo non viene applicato (se non è stato trovato l'elemento), o comunque viene persa la gestione dell'evento nel momento in cui l'elemento in questione viene a mancare dalla pagina.

A differenza, ogni gestore di evento assegnato col metodo on() funziona sia per elementi presenti sia per elementi "futuri".

Note: Event handlers attached using the on() method will work for both current and FUTURE elements (like a new element created by a script).