En jQuery, comment attacher des événements à des éléments html dynamiques? [dupliquer]

parfois faire cela (la réponse la plus votée) n'est pas toujours suffisant:

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

Cela peut être un problème en raison de l'ordre des gestionnaires d'événements sont déclenchés. Si vous vous trouvez à faire cela, mais il provoque des problèmes en raison de l'ordre dans lequel il est traité.. Vous pouvez toujours envelopper cela dans une fonction, qui, lorsqu'elle est appelée "rafraîchit" l'auditeur.

par exemple:

function RefreshSomeEventListener() {
    // Remove handler from existing elements
    $("#wrapper .specific-selector").off(); 

    // Re-add event handler for all matching elements
    $("#wrapper .specific-selector").on("click", function() {
        // Handle event.
    }
}

parce qu'il est une fonction, chaque fois que je mets en place mon auditeur de cette façon, je l'appelle typiquement sur Document ready:

$(document).ready(function() {
    // Other ready commands / code

    // Call our function to setup initial listening
    RefreshSomeEventListener();
});

ensuite, chaque fois que vous ajoutez un élément dynamiquement ajouté, appelez cette méthode à nouveau:

function SomeMethodThatAddsElement() {
    // Some code / AJAX / whatever.. Adding element dynamically

    // Refresh our listener, so the new element is taken into account
    RefreshSomeEventListener();
}

espérons que cela aide!

Cordialement,

après jQuery 1.7 les méthodes préférées sont .sur() et .off ()

de Sean réponse montre un exemple.

Maintenant Déprécié:

utiliser les fonctions jQuery .live() et .die() . Disponible en jQuery 1.3.x

du docs:

pour afficher le texte de chaque paragraphe dans un boîte d'alerte chaque fois qu'il est cliqué:

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

aussi, le livequery plugin fait cela et a le support pour plus d'événements.

si vous ajoutez une pile d'ancres au DOM, regardez dans la délégation d'événement à la place.

voici un exemple simple:

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

lie un gestionnaire à un événement (comme un clic) pour tous les éléments actuels et futurs. Peut aussi lier des événements personnalisés.

texte du lien

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

vous pouvez lier un événement de clic simple à une page pour tous les éléments, peu importe s'ils sont déjà sur cette page ou s'ils arriveront à un moment futur, comme cela:

$(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
   }
});

l'utilise depuis un moment. Fonctionne comme un charme.

dans jQuery 1.7 et plus tard, il est recommandé d'utiliser .on() à la place de bind ou toute autre méthode de délégation d'événement, mais .bind() fonctionne toujours.

si votre on jquery 1.3+ puis utiliser . live ()

lie un handler à un événement (comme click) pour tout le présent - et le futur - appariés élément. Peut aussi lier personnalisé événement.

vous voulez utiliser la fonction live() . Voir les docs .

par exemple:

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