Programmazione.it v6.4
Ciao, per farti riconoscere devi fare il login. Non ti sei ancora iscritto? Che aspetti, registrati adesso!
Info Pubblicità Collabora Autori Sottoscrizioni Preferiti Bozze Scheda personale Privacy Archivio Libri Corsi per principianti Forum
Gestire elementi dinamici in jQuery: il metodo .live()
Scritto da Rocco Galati il 27-01-2011 ore 09:48
Intel Cluster Studio XE
La realizzazione di applicazioni web dinamiche comporta dover gestire tutta una serie di contenuti e di strutture, che possono variare nel tempo a seconda dei dati presenti e delle azioni effettuate dall'utente. Questo aspetto porta gli sviluppatori a dover fare molta attenzione a ogni porzione di codice, in modo tale da verificare le caratteristiche di tutti gli oggetti che vengono aggiunti in modo dinamico.

In generale, il problema si ha quando si desidera associare un evento a un oggetto della pagina come può essere un pulsante o un link con cui interagisce poi l'utente. La soluzione che più comunemente viene impiegata è quella basata sull'utilizzo del metodo .bind(), che consente di stabilire un comportamento da adottare in seguito alla rilevazione di un evento.
  1. $(document).ready( function() {
  2. $('#foo').bind('click', function() {
  3.   alert('Si è verificato un evento');
  4.   });
  5. });
La criticità nasce quando si ha la necessità di aggiungere un ulteriore oggetto alla pagina, eventualmente, con una modalità diversa, ad esempio, in JavaScript.
  1. $('body').append('<foo params="" ..>');
In questo caso, non si riesce a effettuare il trap dell'evento, perché il metodo .bind() non riconosce la presenza del nuovo oggetto.

Fortunatamente, jQuery dispone di un metodo aggiuntivo, denominato .live(), che tiene traccia di tutti gli oggetti anche se non sono stati ancora effettivamente creati nella pagina.
  1. $(document).ready( function() {
  2. $('#foo').live('click', function() {
  3.   alert('Si è verificato un evento');
  4.   });
  5. });
La particolarità del funzionamento di .live() sta nel fatto che non associa l'evento direttamente all'elemento selezionato, ma lo relaziona con il nodo radice del documento, in questo caso $(document), passandogli il selettore dell'elemento come parametro. Così, quando si genera un evento, si risalgono tutti i nodi per trovare un match tra il selettore e l'elemento.

A differenza di .bind(), che non fa distinzione tra la sequenza dei pulsanti del mouse e di default considera l'event mouse come generato dal pulsante sinistro, con il metodo .live() occorre eseguire un controllo in più perché esso rileva un evento con qualsiasi pulsante premuto. Nella maggior parte dei casi, è sufficiente fare un check su event.button, il quale, a seconda dei browser, vale uno o zero in corrispondenza della pressione del tasto sinistro, oppure su event.which che associa un numero intero progressivo in relazione alla disposizione dei tasti sul mouse.
Precedente: In arrivo le variabili nei CSS?
Successiva: Test dei Web Service con WebServiceStudio
Copyright Programmazione.it™ 1999-2013. Alcuni diritti riservati. Testata giornalistica iscritta col n. 569 presso il Tribunale di Milano in data 14/10/2002. Pagina generata in 0.614 secondi.