Qual è la differenza tra jQuery .live () e .on ()

Vedo che c'è un nuovo metodo .on()in jQuery 1.7 che sostituisce .live()nelle versioni precedenti.

Mi interessa conoscere la differenza tra loro e quali sono i vantaggi dell'utilizzo di questo nuovo metodo.

È abbastanza chiaro nei documenti perché non vorresti usare live. Inoltre, come menzionato da Felix, .onè un modo più semplice per allegare gli eventi.

L'uso del metodo .live () non è più raccomandato poiché le versioni successive di jQuery offrono metodi migliori che non hanno i suoi svantaggi. In particolare, sorgono i seguenti problemi con l'uso di .live ():

• jQuery tenta di recuperare gli elementi specificati dal selettore prima di chiamare il .live()metodo, il che potrebbe richiedere molto tempo su documenti di grandi dimensioni.
• I metodi di concatenamento non sono supportati. Ad esempio, non$("a").find(".offsite, .external").live( ... ); è valido e non funziona come previsto.
• Poiché tutti gli .live()eventi sono associati documentall'elemento, gli eventi prendono il percorso più lungo e più lento possibile prima di essere gestiti.
• La chiamata event.stopPropagation() al gestore di eventi è inefficace nell'arresto dei gestori di eventi allegati in basso nel documento; l'evento si è già propagato a document.
• Il .live()metodo interagisce con altri metodi di eventi in modi che possono essere sorprendenti, ad esempio, $(document).unbind("click")rimuove tutti i gestori di clic collegati da qualsiasi chiamata a .live()!

Una differenza in cui le persone inciampano quando si spostano da .live()a .on()è che i parametri per .on()sono leggermente diversi quando si associano eventi a elementi aggiunti dinamicamente al DOM.

Ecco un esempio della sintassi che abbiamo utilizzato con il .live()metodo:

$('button').live('click', doSomething);

function doSomething() {
    // do something
}

Ora .live()essendo deprecato in jQuery versione 1.7 e rimosso nella versione 1.9, dovresti usare il .on()metodo. Ecco un esempio equivalente utilizzando il .on()metodo:

$(document).on('click', 'button', doSomething);

function doSomething() {
    // do something
}

Tieni presente che stiamo chiamando .on()contro il documento piuttosto che il pulsante stesso . Specifichiamo il selettore per l'elemento di cui stiamo ascoltando gli eventi nel secondo parametro.

Nell'esempio sopra, sto invocando .on()il documento, tuttavia otterrai prestazioni migliori se usi un elemento più vicino al tuo selettore. Qualsiasi elemento antenato funzionerà fintanto che esiste sulla pagina prima della chiamata .on().

Questo è spiegato qui nella documentazione ma è abbastanza facile non vederlo.

Vedi il blog ufficiale

[..] Le nuove API .on () e .off () unificano tutti i modi di allegare eventi a un documento in jQuery - e sono più brevi da digitare! [...]

.live()

Questo metodo viene utilizzato per collegare un gestore di eventi per tutti gli elementi che corrispondono al selettore corrente, ora e in futuro.

$( "#someid" ).live( "click", function() {
  console.log("live event.");
});

e

.on()

Questo metodo viene utilizzato per collegare una funzione di gestore di eventi per uno o più eventi agli elementi selezionati di seguito è l'esempio.

$( "#someid" ).on( "click", function() {
  console.log("on event.");
});

Buon tutorial sulla differenza tra on vs live

Citazione dal collegamento sopra

Cosa c'è di sbagliato in .live ()

L'uso del metodo .live () non è più raccomandato poiché le versioni successive di jQuery offrono metodi migliori che non hanno i suoi svantaggi. In particolare, sorgono i seguenti problemi con l'uso di .live ():

1. jQuery tenta di recuperare gli elementi specificati dal selettore prima di chiamare il metodo .live (), il che potrebbe richiedere molto tempo su documenti di grandi dimensioni.
2. I metodi di concatenamento non sono supportati. Ad esempio, $ ("a"). Find (". Offsite, .external"). Live (…); non è valido e non funziona come previsto.
3. Poiché tutti gli eventi .live () sono allegati all'elemento del documento, gli eventi prendono il percorso più lungo e più lento possibile prima di essere gestiti.
4. La chiamata a event.stopPropagation () nel gestore di eventi è inefficace nell'arresto dei gestori di eventi allegati più in basso nel documento; l'evento si è già propagato per documentare.
5. Il metodo .live () interagisce con altri metodi di eventi in modi che possono essere sorprendenti, ad es. $ (Document) .unbind ("click") rimuove tutti i gestori di clic collegati da qualsiasi chiamata a .live ()!

per maggiori informazioni dai un'occhiata .. .live () e .on ()

Il metodo .live () viene utilizzato quando ti occupi della generazione dinamica di contenuti ... come ho creato su un programma che aggiunge una scheda quando cambio il valore di un Jquery Slider e voglio allegare la funzionalità del pulsante di chiusura a ogni scheda che verrà generato ... il codice che ho provato è ..

var tabs = $('#tabs').tabs();
                                        // live() methos attaches an event handler for all
                                        //elements which matches the curren selector
        $( "#tabs span.ui-icon-close" ).live( "click", function() {


            // fetches the panelId attribute aria-control which is like tab1 or vice versa
            var panelId = $( this  ).closest( "li" ).remove().attr( "aria-controls" );
            $( "#" + panelId ).remove();
            tabs.tabs( "refresh" );
        });

e funziona molto bene ...

Sono l'autore di un'estensione di Chrome "Comment Save" che utilizza jQuery e una che ha utilizzato .live(). Il modo in cui funziona l'estensione è allegare un listener a tutte le aree di testo che utilizzano. live()- questo ha funzionato bene poiché ogni volta che il documento cambiava, avrebbe comunque allegato l'ascoltatore a tutte le nuove aree di testo.

Mi sono trasferito .on()ma non funziona altrettanto bene. Non collega l'ascoltatore ogni volta che il documento cambia, quindi sono tornato a utilizzare .live(). Questo è un bug in cui immagino .on(). Stai attento, immagino.

Ho l'obbligo di identificare l'evento chiuso del browser. Dopo aver fatto delle ricerche, sto seguendo usando jQuery 1.8.3

1. Attiva un flag usando il seguente jQuery quando si fa clic sul collegamento ipertestuale

   $ ('a'). live ('click', function () {cleanSession = false;});

2. Attiva un flag utilizzando il seguente jQuery ogni volta che viene cliccato il tipo di pulsante di input di invio

$ ("input [type = submit]"). live ('click', function () {alert ('input button clicked'); cleanSession = false;});

1. Attiva un flag utilizzando il seguente jQuery ogni volta che si verifica l'invio di un modulo

$ ('form'). live ('submit', function () {cleanSession = false;});

Ora cosa importante ... la mia soluzione funziona solo se uso .live invece .on. Se uso .on, l'evento viene attivato dopo che il modulo è stato inviato e che è troppo tardi. Molte volte i miei moduli vengono inviati utilizzando la chiamata javascript (document.form.submit)

Quindi c'è una differenza fondamentale tra .live e .on. Se utilizzi .live i tuoi eventi vengono attivati ​​immediatamente, ma se passi a .on non vengono attivati ​​in tempo