utilizzando Live() - benefici - simili a legare()

Question

Ho fatto un po 'di lettura fino a jquery evento in diretta e sono ancora un po' confuso? Qual è il vantaggio di usarlo?

http://docs.jquery.com/Events/live

so che è simile per legare ma entrambi di quegli eventi ancora sembrano fuori per me.

Solo in cerca di alcuni indicatori.

Answer 1

Avviso: questa risposta è vecchia. ancora molto utile, ma live è stato deprecato e rimosso nelle versioni più recenti di jQuery. Quindi leggi la risposta, perché i casi d'uso non sono cambiati e imparerai perché e quando usare meno gestori di eventi. Ma a meno che tu non stia ancora utilizzando una versione molto vecchia di jQuery (v1.4.2 o precedente), dovresti considerare di scrivere il nuovo codice equivalente.Come documentato nella jQuery API for live e copiata qui:

riscrittura metodo .live() in termini di successori è semplice; questi sono i modelli per le chiamate equivalenti per tutti i metodi di attacco a tre eventi:

1. $(selector).live(events, data, handler); // jQuery 1.3+
2. $(document).delegate(selector, events, data, handler); // jQuery 1.4.3+
3. $(document).on(events, selector, data, handler); // jQuery 1.7+

A volte è necessario un insieme di elementi al caricamento della pagina, come, ad esempio, modificare i collegamenti:

<table> 
    <tr> 
    <td>Item 1</td> 
    <td><a href="#" class="edit">Edit</a></td> 
    </tr> 
    <tr> 
    <td>Item 2</td> 
    <td><a href="#" class="edit">Edit</a></td> 
    </tr> 
    <tr> 
    <td>Item 3</td> 
    <td><a href="#" class="edit">Edit</a></td> 
    </tr> 
</table> 

Ora, forse hai qualcosa di simile con jQuery:

$(document).ready(function() { 
    $('a.edit').click(function() { 
    // do something 
    return false; 
    }); 
}); 

Ma cosa succede se si aggiunge un nuovo elemento a questa tabella in modo dinamico, dopo che la pagina è inizialmente caricata?

$('table').append(' 
    <tr><td>Item 4</td><td><a href="#" class="edit">Edit</a></td></tr> 
'); 

Quando si fa clic su "Modifica" in questa nuova voce, non succederà nulla perché gli eventi erano legati al caricamento della pagina. Entra live Con esso, è possibile associare l'evento di cui sopra in questo modo:

$(document).ready(function() { 
    $('a.edit').live('click', function() { 
    // do something 
    return false; 
    }); 
}); 

Ora, se si aggiungono eventuali nuovi <a> elementi con una classe di edit dopo che la pagina è inizialmente caricato, sarà ancora registrare il gestore eventi.

Ma come è stato realizzato?

jQuery utilizza ciò che è noto come delega degli eventi per ottenere questa funzionalità. La delega degli eventi è utile in questa situazione o quando si desidera caricare una grande quantità di gestori. Diciamo che avete un DIV con le immagini:

<div id="container"> 
    <img src="happy.jpg"> 
    <img src="sad.jpg"> 
    <img src="laugh.jpg"> 
    <img src="boring.jpg"> 
</div> 

Ma invece di 4 immagini, si dispone di 100 o 200, o 1000. Si vuole associare un evento click per immagini in modo viene eseguita l'azione X quando l'utente fa clic su di essa. Facendolo come ci si potrebbe aspettare ...

$('#container img').click(function() { 
    // do something 
}); 

... quindi legherebbe centinaia di gestori che fanno tutti la stessa cosa! Questo è inefficiente e può comportare prestazioni lente in webapp pesanti. Con la delega degli eventi, anche se non hai intenzione di aggiungere altre immagini in un secondo momento, l'utilizzo di live può essere molto migliore per questo tipo di situazione, in quanto puoi legare il gestore a al container e controllare quando viene fatto clic sul target era un'immagine, e quindi eseguire un'azione:

// to achieve the effect without live... 
$('#container').click(function(e) { 
    if($(e.target).is('img')) { 
     performAction(e.target); 
    } 
}); 

// or, with live: 
$('img', '#container').live('click', function() { 
    performAction(this); 
}); 

da jQuery sa che i nuovi elementi possono essere aggiunti successivamente o che le prestazioni sono importanti, invece di legare un evento per le immagini reali, potrebbe aggiungere uno al div come nel primo esempio (in realtà sono abbastanza sicuro che li lega al corpo ma potrebbe essere nel contenitore nell'esempio precedente) e quindi delegare. Questa proprietà e.target può lasciarlo controllare dopo il fatto se l'evento su cui è stato fatto clic/attivato corrisponde al selettore che potresti aver specificato.

Per rendere chiaro: questo è utile non solo nel modo diretto di non dover riassociare gli eventi, ma può essere notevolmente più veloce per una grande quantità di elementi.

Answer 2

In sostanza, con .live() non c'è bisogno di preoccuparsi di aggiornare i gestori di eventi se si dispone di un sito web molto dinamico.

$('.hello').live('click', function() { 
    alert('Hello!'); 
}); 

Che esempio si legherà l'evento click a tutti gli elementi che hanno già il "ciao" classe nonché tutti gli elementi che vengono inseriti in modo dinamico, sia per AJAX o old-fashion JavaScript.

Answer 3

Il vantaggio è che il gestore di eventi sarà anche aggiunto nuovi elementi corrispondenti quando vengono creati questi elementi. Questo ti evita di dover aggiungere manualmente il gestore di eventi ogni volta che crei un nuovo elemento (corrispondente a un selettore usato in precedenza) che ne ha bisogno.

Aggiunto in jQuery 1.3: si lega un gestore ad un evento (come il clic) per tutti corrente - e future - abbinato elemento.

Da http://docs.jquery.com/Events/live#typefn, enfasi il mio.