Metodo jQuery .live () vs .on () per l'aggiunta di un evento click dopo aver caricato html dinamico

Sto usando jQuery v.1.7.1 in cui il metodo .live () è apparentemente deprecato.

Il problema che sto riscontrando è che quando si carica in modo dinamico html in un elemento usando:

$('#parent').load("http://..."); 

Se provo ad aggiungere un evento click in seguito, non registra l'evento usando uno di questi metodi:

$('#parent').click(function() ...); 

o

// according to documentation this should be used instead of .live()
$('#child').on('click', function() ...); 

Qual è il modo corretto per ottenere questa funzionalità? Sembra funzionare solo con .live () per me, ma non dovrei usare quel metodo. Nota che #child è un elemento caricato dinamicamente.

Grazie.

Se vuoi che il gestore di clic funzioni per un elemento che viene caricato in modo dinamico, allora imposti il ​​gestore di eventi su un oggetto padre (che non viene caricato in modo dinamico) e gli dai un selettore che corrisponda al tuo oggetto dinamico in questo modo:

$('#parent').on("click", "#child", function() {});

Il gestore eventi verrà collegato #parentall'oggetto e ogni volta che si verifica un evento click su di esso che ha avuto origine #child, genererà il gestore clic. Questo si chiama gestione degli eventi delegati (la gestione degli eventi è delegata a un oggetto padre).

Viene fatto in questo modo perché è possibile associare l'evento #parentall'oggetto anche quando l' #childoggetto non esiste ancora, ma quando in seguito esiste e viene cliccato, l'evento click passerà #parentall'oggetto, vedrà che ha avuto origine #childe c'è un gestore di eventi per fare clic su #childe attivare il tuo evento.

Prova questo:

$('#parent').on('click', '#child', function() {
    // Code
});

Dalla $.on()documentazione:

I gestori di eventi sono associati solo agli elementi attualmente selezionati; devono esistere sulla pagina nel momento in cui il codice effettua la chiamata .on().

Il tuo #childelemento non esiste quando lo chiami $.on(), quindi l'evento non è associato (diversamente $.live()). #parentTuttavia, fa esistono, in modo vincolante l'evento che è bene.

Il secondo argomento nel mio codice precedente funge da 'filtro' per innescarsi solo se l'evento traboccava #parentda #child.

$(document).on('click', '.selector', function() { /* do stuff */ });

EDIT: sto fornendo un po 'più di informazioni su come funziona, perché ... parole. Con questo esempio, stai posizionando un ascoltatore sull'intero documento.

Quando ci si trova clicksu uno o più elementi corrispondenti .selector, l'evento passa al documento principale, a condizione che non vi siano altri listener che chiamano event.stopPropagation()metodo, che porterebbe il gorgoglio di un evento agli elementi padre.

Invece di associarti a uno specifico elemento o insieme di elementi, stai ascoltando qualsiasi evento proveniente da elementi che corrispondono al selettore specificato. Ciò significa che è possibile creare un listener, una volta, che corrisponderà automaticamente agli elementi attualmente esistenti e a tutti gli elementi aggiunti dinamicamente.

Questo è intelligente per alcuni motivi, tra cui prestazioni e utilizzo della memoria (in applicazioni su larga scala)

MODIFICARE:

Ovviamente, l'elemento genitore più vicino su cui puoi ascoltare è migliore e puoi usare qualsiasi elemento al posto di documentfintanto che i bambini per cui vuoi monitorare gli eventi sono all'interno di quell'elemento genitore ... ma che in realtà non ha nulla da fare con la domanda.

L'equivalente di .live () in 1.7 è simile al seguente:

$(document).on('click', '#child', function() ...); 

Fondamentalmente, guarda il documento per gli eventi click e filtrali per #child.

So che è un po 'tardi per una risposta, ma ho creato un polyfill per il metodo .live (). L'ho provato in jQuery 1.11 e sembra funzionare abbastanza bene. So che dovremmo implementare il metodo .on () laddove possibile, ma nei grandi progetti, dove non è possibile convertire tutte le chiamate .live () in chiamate .on () equivalenti per qualsiasi motivo, il seguente potrebbe lavoro:

if(jQuery && !jQuery.fn.live) {
    jQuery.fn.live = function(evt, func) {
        $('body').on(evt, this.selector, func);
    }
}

Includilo semplicemente dopo aver caricato jQuery e prima di chiamare live ().

.on () è per jQuery versione 1.7 e successive. Se hai una versione precedente, usa questo:

$("#SomeId").live("click",function(){
    //do stuff;
});

Ho usato "live" nel mio progetto, ma uno dei miei amici mi ha suggerito di usare "on" anziché live. E quando ho provato a usarlo ho riscontrato un problema come te.

Sulle mie pagine creo dinamicamente righe di tabelle di pulsanti e molte cose dom. ma quando uso la magia è scomparsa.

Le altre soluzioni come usarlo come un bambino chiamano le tue funzioni ogni volta ad ogni clic. Ma trovo un modo per farlo accadere di nuovo ed ecco la soluzione.

Scrivi il tuo codice come:

function caller(){
    $('.ObjectYouWntToCall').on("click", function() {...magic...});
}

Chiama il chiamante (); dopo aver creato l'oggetto nella pagina in questo modo.

$('<dom class="ObjectYouWntToCall">bla... bla...<dom>').appendTo("#whereeveryouwant");
caller();

In questo modo la tua funzione viene chiamata quando si suppone che non tutti i clic sulla pagina.