Trasformando live () in on () in jQuery

202

La mia applicazione ha aggiunto dinamicamente i menu a discesa. L'utente può aggiungerne quanti ne hanno bisogno.

Tradizionalmente utilizzavo il live()metodo di jQuery per rilevare quando è stato editato uno di questi Dropdown change():

$('select[name^="income_type_"]').live('change', function() {
    alert($(this).val());
});

A partire da jQuery 1.7, ho aggiornato questo a:

$('select[name^="income_type_"]').on('change', function() {
    alert($(this).val());
});

Guardando Docs, dovrebbe essere perfettamente valido (giusto?) - ma il gestore dell'evento non spara mai. Naturalmente, ho confermato che jQuery 1.7 è caricato e in esecuzione, ecc. Non ci sono errori nel registro degli errori.

Che cosa sto facendo di sbagliato? Grazie!

javascript jquery jquery-1.7

— Jack
fonte

2

So che è in ritardo, ma sembra che jQuery livestia effettivamente usando oncomunque, quindi una riscrittura del codice legacy potrebbe non essere ancora necessaria fino livea quando non verrà rimossa, che credo sia 1.9. Estratto dalla fonte 1.7.1: live: function( types, data, fn ) {jQuery( this.context ).on( types, this.selector, data, fn ); return this;}Quindi, se non si sta eseguendo l'aggiornamento a una versione in cui liveè sparito, potrebbe non essere necessario un aggiornamento immediato per il codice legacy. Per il nuovo codice fuori rotta usare on()invece è come raccomandato. Ho solo pensato che queste informazioni potrebbero aiutare qualcun altro a un certo punto.

— No,

1

Vedi Esempi di migrazione su come passare livea on.

— Samuel Liew

246

La ondocumentazione afferma (in grassetto;)):

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().

Equivalente a .live()sarebbe qualcosa di simile

$(document.body).on('change', 'select[name^="income_type_"]', function() {
    alert($(this).val());
});

Sebbene sia meglio associare il gestore eventi il più vicino possibile agli elementi, ovvero a un elemento che si avvicina di più alla gerarchia.

Aggiornamento: rispondendo a un'altra domanda, ho scoperto che questo è anche menzionato nella .livedocumentazione :

Riscrivere il .live()metodo in termini di successori è semplice; questi sono modelli per chiamate equivalenti per tutti e tre i metodi di collegamento degli eventi:
$(selector).live(events, data, handler);                // jQuery 1.3+
$(document).delegate(selector, events, data, handler);  // jQuery 1.4.3+
$(document).on(events, selector, data, handler);        // jQuery 1.7+

— Felix Kling
fonte

5

@Jack: non preoccuparti, IMO è una buona domanda. Presumo altri si inciampare su questo così quando cercano di convertire tutti i bind, livee delegatele chiamate verso on.

— Felix Kling,

4

Ah sì, e ovviamente vediamo questa risposta solo dopo aver eseguito una coperta trova e sostituisci da .live>.on

— ajbeaven

3

IMO, la .onsintassi è più logica, poiché l'ascoltatore è effettivamente collegato al selettore fornito. Quando viene attivato l'evento, jQuery attraversa il DOM ed esegue i gestori dove specificato (delega di eventi semplice). .livesuggerì che accadde qualcosa di "magico", e si diceva che collegasse i gestori di eventi per "elementi futuri" che non era del tutto vero.

— David Hellsing,

1

@FelixKling che è corretto - Mi sono imbattuto anche in questo! Grazie

— willdanceforfun il

2

Per il motore di ricerca: il metodo j .Query ".live ()" è ammortizzato dalla v1.7 e rimosso nella v1.9. Correggi i tuoi script usando invece il metodo ".on ()". Sorprendentemente, ciò influisce anche sull'attuale Microsoft jquery.unobtrusive-ajax.js v2.0.20710.0 (anche Microsoft non ha aggiornato i propri script, quindi ora non funziona).

— Tony Wall,

25

Oltre alla risposta selezionata,

Porta jQuery.livea jQuery 1.9+ durante l'attesa della migrazione dell'applicazione. Aggiungi questo al tuo file JavaScript.

// Borrowed from jQuery 1.8.3's source code
jQuery.fn.extend({
  live: function( types, data, fn ) {
          if( window.console && console.warn ) {
           console.warn( "jQuery.live is deprecated. Use jQuery.on instead." );
          }

          jQuery( this.context ).on( types, this.selector, data, fn );
          return this;
        }
});

Nota: la funzione sopra non funzionerà da jQuery v3 comethis.selector viene rimossa.

Oppure puoi usare https://github.com/jquery/jquery-migrate

— Vikrant Chaudhary
fonte

7

Ho appena trovato una soluzione migliore che non comporta la modifica di codice di terze parti:

https://github.com/jquery/jquery-migrate/#readme

Installa il pacchetto jQuery Migrate NuGet in Visual Studio per eliminare tutti i problemi di controllo delle versioni. La prossima volta che Microsoft aggiornerà il loro discreto AJAX e i moduli di convalida, forse ci proveranno di nuovo senza lo script di migrazione per vedere se hanno risolto il problema.

Poiché jQuery Migrate è gestito dalla jQuery Foundation, penso che questo non sia solo l'approccio migliore per le librerie di terze parti, ma anche quello di ricevere messaggi di avviso per le tue librerie che descrivono in dettaglio come aggiornarli.

— Tony Wall
fonte

3

Oltre alle risposte selezionate,

Se si utilizza Visual Studio , è possibile utilizzare Regex Replace .
In Modifica> Trova e sostituisci> Sostituisci in file
oppure Ctrl + Maiusc + H

Nel pop-up Trova e sostituisci, imposta questi campi

Trova cosa: \$$(.*)$\.live\((.*),
Sostituisci con: $(document.body).on($2,$1,
nelle opzioni di ricerca seleziona "Usa espressioni regolari"

— Maykol Rypka
fonte

-1

jquery verision xxxjs aprire l'editor, trovare jQuery.fn.extend

aggiungi codice

live: function( types, data, fn ) {
        jQuery( this.context ).on( types, this.selector, data, fn );
        return this;
    },

Esempio: jquery-2.1.1.js -> riga 7469 (jQuery.fn.extend)

Visualizzazione di immagini di esempio

— Uğur Tosun
fonte