Sono curioso di conoscere le differenze tra il binding e le funzioni live.Qual è la differenza tra i metodi bind e live in jQuery?
Per me sembrano quasi identici.
ho letto the benefits of live/bind methods, ma non mi ha detto sulle differenze ...
Grazie!
. Bind() allega gli eventi agli elementi esistenti o corrispondenti al selettore nel momento in cui viene effettuata la chiamata. Tutti gli elementi creati successivamente o che corrispondono alla funzione successiva perché la classe è stata modificata, non generano l'evento associato.
.live() funziona per gli elementi di corrispondenza esistenti e futuri. Prima di jQuery 1.4 questo era limitato ai seguenti eventi: clic, dblclick mouse, mouseup, mouse, mouseover, mouseout, keydown, keypress, keyup
Per chiunque stia leggendo ora, '.live()' non è più limitato agli eventi elencati sopra. L'evento '.live()' ora supporta in jQuery 1.4 per tutti gli eventi, inclusi gli eventi personalizzati. –
questa risposta in realtà non risponde alla domanda, vedere sotto risposta di nickf per la spiegazione richiesta – mikkelbreum
Bind è solo un live povero e limitato ... perché mai esiste ancora? – Ben
Bind associa gli eventi allo schema specificato, per tutte le partite nel DOM corrente a il momento in cui lo chiami. Live collegherà gli eventi al pattern specificato per il DOM corrente e alle corrispondenze future nel DOM, anche se cambia.
Ad esempio, se si associa $ ("div"). Bind ("hover", ...) si applica a tutti i "div" s nel DOM al momento. Se poi manipoli il DOM e aggiungi un ulteriore "div", non avrà questo evento legato al passaggio del mouse. Usare live invece di bind invierà l'evento anche al nuovo div.
immaginare questo scenario:
<img> elementi.
$('img').bind('click', function(){...});get(), o html(), qualsiasi cosa)naturalmente, dal momento che le nuove immagini non esistevano quando hai fatto il $('img')... al punto 2, non vincola il gestore di eventi a loro.
ora, se si esegue questa operazione:
<img> elementi.
$('img').live('click', function(){...});get(), o html(), qualsiasi cosa)magia? solo un po. infatti jQuery lega un gestore di eventi generico a un altro elemento più in alto nell'albero DOM (body? document? no idea) e fa scoppiare l'evento. quando arriva al gestore generico, controlla se corrisponde agli eventi live() e, in caso affermativo, vengono licenziati, non importa se l'elemento è stato creato prima o dopo la chiamata live().
questa è un'ottima descrizione –
In aggiunta a ciò che hanno detto, penso che sia meglio cercare di attenersi a bind quando/dove è possibile e utilizzare live solo quando è necessario.
Hai ragione. .live è un must per gli eventi Ajax, però, giusto? –
Perché lo dici? Ho scoperto che live semplifica il codice. Sono piuttosto schizzinoso riguardo le prestazioni e mi sembra soddisfacente. Qual è il rovescio della medaglia? – Nosredna
Beh, innanzitutto perché non tutti gli eventi sono disponibili con live(). In secondo luogo, perché ritengo che siano più difficili da gestire (no stopPropagation e stopImmediatePropagation), e terzo perché live() sicuramente genera più overhead rispetto a bind() (dato che cerca modifiche nel DOM). Forse non è una differenza killer, ma ancora. Questo è il motivo per cui tendo ad attaccare a bind() dove possibile. – andi
In breve: .bind() si applica solo agli elementi attualmente selezionati nell'oggetto jQuery. .live() si applicherà a tutti gli elementi di corrispondenza correnti, così come a quelli che potresti aggiungere in futuro.
La differenza sottostante tra di loro è che live() utilizza event bubbling. Cioè, quando si fa clic su un pulsante, quel pulsante potrebbe esistere in un <p>, in un , in un elemento <body>; quindi, in effetti, stai facendo clic su tutti questi elementi contemporaneamente.
live() opere allegando il tuo gestore di eventi per il documento, non al elemento. Quando fai clic su quel pulsante, come illustrato in precedenza, il documento riceve lo stesso evento click. Quindi esegue il backup della linea di elementi targetizzati dall'evento e controlla se qualcuno di essi corrisponde alla tua query.
Il risultato è duplice: in primo luogo, significa che non è necessario continuare a riapplicare gli eventi ai nuovi elementi, poiché verranno aggiunti implicitamente quando si verifica l'evento. Tuttavia, cosa più importante (dipende dalla tua situazione), significa che il tuo codice è molto più leggero! Se si dispone di 50 <img> tag sulla pagina e si esegue questo codice:
$('img').click(function() { /* doSomething */ });
... allora che la funzione è copiati in ciascuno di questi elementi. Tuttavia, se si ha questo codice:
$('img').live('click', function() { /* doSomething */ });
... allora che la funzione viene memorizzato in un solo posto (sul documento), e si applica a tutto ciò che corrisponde la vostra richiesta al momento dell'evento.
A causa di questo comportamento di bubbling, tuttavia, non tutti gli eventi possono essere gestiti in questo modo. Come notato da Ichiban, questi eventi supportati sono click, dblclick mouse, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup.
Molto bene! Grazie! –
Grazie per la spiegazione di * come * funziona. La documentazione di jQuery non spiega nulla di ciò, il che sembra importante per utilizzarlo. – harpo
@meagar: "A causa di questo comportamento bubbling, tuttavia, non tutti gli eventi possono essere gestiti in questo modo. Come notato da Ichiban, questi eventi supportati sono click, mouse, mouse, mouse, mouseover, mouseout, keydown, keyup." Quindi, ora che funziona per tutti gli eventi nelle versioni successive di jQuery, funziona ancora essendo attaccato al corpo e attivato quando il corpo riceve finalmente l'evento spumeggiante, o è cambiato? – mikkelbreum
Volevo aggiungere a questo dopo aver dovuto eseguire il debug un po 'a causa della mia stupidità. Ho applicato .live() a una classe di pulsanti sulla mia pagina, supponendo che avrebbe solo visualizzato l'ID corretto che stavo cercando di trasmettere alla stringa di query e fare ciò che volevo fare con la chiamata ajax. La mia app ha aggiunto in modo dinamico i pulsanti associati a un articolo di inventario. Ad esempio, inserisci le categorie nel pulsante "COKE" per aggiungere una coca al tuo ordine. Esegui nuovamente il drill e aggiungi "BUDLITE" ogni volta che desidero che tali elementi vengano inseriti in una tabella tramite una chiamata AJAX.
Tuttavia, dal momento che ho associato .live() all'intera classe di pulsanti, ricordava ogni chiamata ajax che avevo fatto e la ri-lancia per ogni pulsante successivo! E 'stato un po' complicato perché non ero esattamente chiaro sulla differenza tra bind e live (e la risposta di cui sopra è cristallina), quindi ho pensato di metterlo qui nel caso qualcuno stesse facendo una ricerca su questa roba .
C'è un modo per ottenere l'effetto live ma il suo tipo di brutto.
$ (questo) .unbind ('mouseout').bind ('mouseout', function() { });
cancella il precedente e ripristina il nuovo. Sembra che funzioni per me nel tempo.
Oppure puoi utilizzare la delega dell'evento appropriata, associare gli eventi a 'document' e controllare la destinazione dell'evento. – eyelidlessness
Nizza continua a leggere questo: http://www.alfajango.com/blog/the-difference-between-jquerys-bind-live-and-delegate/
è al giorno d'oggi (dal jQuery 1.7) deprecato utilizzando la funzione .on() - http://api.jquery.com/on/
Tutti questi metodi di jQuery sono utilizzati per collegare gli eventi ai selettori o elementi. Ma sono tutti diversi l'uno dall'altro.
.bind(): Questo è il metodo più semplice e veloce per associare gli eventi. Ma il problema con bind() è che non funziona per gli elementi aggiunti dinamicamente che corrisponde allo stesso selettore. bind() associa solo eventi agli elementi attuali e non a quelli futuri. Oltre a ciò, ha anche problemi di prestazioni quando si ha a che fare con un'ampia selezione.
.live(): Questo metodo supera lo svantaggio di bind(). Funziona per elementi aggiunti in modo dinamico o elementi futuri. A causa delle sue scarse prestazioni su pagine grandi, questo metodo è deprecato da jQuery 1.7 e dovresti smettere di usarlo. Il concatenamento non è supportato correttamente utilizzando questo metodo.
Per saperne di più here
Oltre alla risposta di seguito, i lettori potrebbe desiderare di avere uno sguardo a questo * incredibilmente buono * [articolo] (http://www.alfajango.com/blog/the-difference -tra-jquerys-bind-live-and-delegate /) che spiega la differenza tra 'bind',' live' e 'delegate'. Aggiornamento – Jon
: Dal jquery 1.7 -'live() 'è deprecato a favore di 'on()'. – Tapirboy
Alcune informazioni qui http://markupjavascript.blogspot.in/2013/10/bind-live-delegate-on-what-is-difference.html –