javascript on - In jQuery, come allegare eventi ad elementi html dinamici?




change multiple (8)

Dopo jQuery 1.7 i metodi preferiti sono http://api.jquery.com/on/ e .off()

La risposta di Sean mostra un esempio.

Ora deprecato:

Utilizza le funzioni jQuery .live() e .die() . Disponibile in jQuery 1.3.x

Dai documenti:

Per visualizzare il testo di ogni paragrafo in una casella di avviso ogni volta che viene fatto clic:

$("p").live("click", function(){
  alert( $(this).text() );
});

Inoltre, il plugin livequery fa questo e ha il supporto per altri eventi.

Questa domanda ha già una risposta qui:

Supponiamo che abbia un codice jQuery che allega un gestore di eventi a tutti gli elementi con la classe "myclass". Per esempio:

$(function(){
    $(".myclass").click( function() {
        // do something
    });
});

E il mio html potrebbe essere il seguente:

<a class="myclass" href="#">test1</a>
<a class="myclass" href="#">test2</a>
<a class="myclass" href="#">test3</a>

Funziona senza problemi. Tuttavia, considera se gli elementi "myclass" sono stati scritti sulla pagina in un momento futuro.

Per esempio:

<a id="anchor1" href="#">create link dynamically</a>
<script type="text/javascript">
$(function(){
    $("#anchor1").click( function() {
        $("#anchor1").append('<a class="myclass" href="#">test4</a>');
    });
});
</script>

In questo caso, il collegamento "test4" viene creato quando un utente fa clic su un # anchor1.

Il link "test4" non ha il gestore click () associato ad esso, anche se ha classe = "myclass".

Qualche idea su come posso risolvere questo problema?

Fondamentalmente, vorrei scrivere il gestore click () una volta e farlo applicare sia al contenuto presente al caricamento della pagina, sia al contenuto introdotto successivamente tramite Ajax / DHTML.


Puoi associare un singolo evento a una pagina per tutti gli elementi, non importa se sono già in quella pagina o se arriveranno in un momento successivo, in questo modo:

$(document).bind('click', function (e) {
   var target = $(e.target);
   if (target.is('.myclass')) {
      e.preventDefault(); // if you want to cancel the event flow
      // do something
   } else if (target.is('.myotherclass')) {
      e.preventDefault();
      // do something else
   }
});

Lo stavo usando da un po '. Funziona come un fascino.

In jQuery 1.7 e versioni successive, si consiglia di utilizzare .on() al posto di bind o qualsiasi altro metodo di delega degli eventi, ma .bind() funziona ancora.


Vuoi usare la funzione live() . Vedi .live() .

Per esempio:

$("#anchor1").live("click", function() {
    $("#anchor1").append('<a class="myclass" href="#">test4</a>');
});

Se sei su jQuery 1.3+, usa. .live()

Lega un gestore a un evento (come il clic) per tutti gli elementi attuali e futuri. Può anche associare eventi personalizzati.


Se stai aggiungendo una pila di ancore al DOM, cerca invece la delega degli eventi.

Ecco un semplice esempio:

$('#somecontainer').click(function(e) {   
  var $target = $(e.target);   
  if ($target.hasClass("myclass")) {
    // do something
  }
});

Sto aggiungendo una nuova risposta per riflettere i cambiamenti nelle versioni successive di jQuery. Il metodo .live () è deprecato da jQuery 1.7.

Da http://api.jquery.com/live/

A partire da jQuery 1.7, il metodo .live () è deprecato. Usa .on () per allegare gestori di eventi. Gli utenti di versioni precedenti di jQuery dovrebbero usare .delegate () preferibilmente a .live ().

Per jQuery 1.7+ puoi associare un gestore di eventi a un elemento genitore usando .on (), e passare il selettore a combinato con 'myclass' come argomento.

Vedi http://api.jquery.com/on/

Quindi invece di ...

$(".myclass").click( function() {
    // do something
});

Tu puoi scrivere...

$('body').on('click', 'a.myclass', function() {
    // do something
});

Ciò funzionerà per tutti i tag con "myclass" nel corpo, già presenti o aggiunti in modo dinamico successivamente.

Il tag body viene qui utilizzato poiché l'esempio non ha un tag circostante statico più vicino, ma qualsiasi tag genitore che esiste quando si verifica la chiamata al metodo .on. Ad esempio un tag ul per una lista con elementi dinamici aggiunti sarebbe simile a questo:

$('ul').on('click', 'li', function() {
    alert( $(this).text() );
});

Finché esiste il tag ul questo funzionerà (non sono ancora necessari elementi li).


Lega un gestore a un evento (come il clic) per tutti gli elementi attuali e futuri. Può anche associare eventi personalizzati.

.live()

$(function(){
    $(".myclass").live("click", function() {
        // do something
    });
});

$(document).click(function() {
    $(".overlay-window").hide();
});
$(".overlay-window").click(function() {
    return false;
});

Se fai clic sul documento, nascondi un determinato elemento, a meno che non fai clic su quello stesso elemento.





javascript jquery events dhtml