Gestire gli eventi click dopo metodo .load()

Pubblicato ven 29 nov 2013 by
Gestire gli eventi click dopo metodo .load()

Quando abbiamo bisogno di utilizzare ajax per le nostre chiamate asincrone possiamo farlo in modo molto rapido grazie a jQuery, nei siti moderni e sopratutto nelle web app ajax è molto utilizzato, esso ci permette di inviare e ricevere dei dati senza bisogno di ricaricare tutta la pagina.

Jquery oltre ad avere le funzioni $get e $post ha una funzione load() che ci permette appunto di caricare una pagina intera o solo una porzione di nostro interesse, cosa succede però se dopo aver ricaricato la porzione di html clicchiamo su un controllo in jQuery presente nella stessa pagina? Semplicemente non risponderà, o meglio, non risponderà solo se si verifica una condizione simile: 

$(document).ready(function() {
$(".selettore").click(function(){
    //codice da eseguire
  });
});

Il problema stà nel (document).ready() esso infatti parte al caricamento completo del DOM ed esegue il codice contenuto in esso, quando eseguiamo una chiamata ajax e successivamente il comando load() andiamo a modificare il DOM quindi (document).ready() non sarà attivo nella nuova versione del DOM.

Per ovviare a questo problema dobbiamo semplicemente sostituire il codice con questo più adatto:

$(document).on("click", ".selettore", function(event){
    //attenzione a non confondere con il comando onClick
   //mioCodice
  });

In questo modo javascript intercetterà in qualsiasi caso il click e non avrete più problemi di malfunzionamento dei vostri script.

Il comando .on() ha rimpiazzato .live() esso infatti è stato deprecato dalla versione di jQuery 1.7 ed è stato definitivamente rimosso nella versione 1.9 quindi se utilizzate dalla 1.7 in poi non usate .live()

comments powered by Disqus