éléments jQuery créés à l'aide .append (html) non disponible

Question

Je donne les résultats suivants

<script> 
    $(document).ready(function() { 
     $(".mapLink").click(function(){ 
      pos = $(this).attr("id"); 
      alert(pos); 
     }); 
    }); 
</script> 

<a class="map" id="test">Test</a> 

Lorsque je clique sur le test je reçois une alerte ... grande. Mais j'ai aussi ce qui suit ...

<script> 
    $(document).ready(function() { 
     $(".mapLink").click(function(){ 
      pos = $(this).attr("id"); 
      alert(pos); 
     }); 
    }); 
    $(#emp").change(function(){ 
     $("#existingAttendTime").html(''); 
     $.ajax({ 
      url: "existingAttendTime.php?emp=" + SelValue + "&time=0", 
      cache: false, 
      success: function(html){ 
       $("#existingAttendTime").append(html); 
      } 
     }); 
    }); 
</script> 

<a class="mapLink" id="test">Test</a> 
<div id="existingAttendTime"></div> 

Lorsque l'emp change il se déclenche au large et obtient les résultats de existingAttendTime.php et il insère dans la div, il ressemble maintenant quelque chose comme ...

<a class="mapLink" id="test">Test</a> 
<div id="existingAttendTime"><a class="mapLink" id="12345">Return Test</a></div> 

En cliquant sur Test, j'obtiens l'alerte "test", mais en cliquant sur Return Test, je ne reçois rien.

Qu'est-ce que je fais de mal ou qu'est-ce qui me manque?

Answer 1

Vous devez lier votre gestionnaire de clic en mode « live », ou bien des noeuds DOM nouvellement ajoutés ne déclencheront pas:

$(document).ready(function() { 
    $(".mapLink").live("click", function(){ 
     pos = $(this).attr("id"); 
     alert(pos); 
    }); 
}); 

Il y avait un plugin nécessaire pour les requêtes en direct, mais jQuery 1.3 intégré une version limitée de celui-ci into core. Notez également que seuls certains types d'événements fonctionnent; Ne le fera pas, donc vous devrez explicitement attacher le gestionnaire à l'intérieur de la même fonction qui a ajouté le nouveau noeud au DOM.

Answer 2

Les gestionnaires d'événements sont fixés sur DOM prêt une fois, si vous manipulez le DOM vous devrez soit

• A) refixer manuellement les gestionnaires d'événements
• B) comptent sur jQuery.prototype.live

Il est probablement plus approprié d'utiliser B, donc je suggère de changer votre code de clic à quelque chose comme ..

$("a.mapLink").live("click", function(){ 
    var pos = $(this).attr("id"); 
    alert(pos); 
}); 

Ceci va cibler toutes les ancres qui ont été ajoutées via la manipulation DOM.

Référence: http://docs.jquery.com/Events/live

Et Pour votre information, vous devriez utiliser var pour déclarer pos dans le périmètre actuel.

Answer 3

Lors de l'ajout dynamique d'éléments, le gestionnaire click ne sera pas enregistré sur les nouveaux éléments. Au lieu de cela, utilisez .live():

$(document).ready(function() { 
    $(".mapLink").live('click', function(){ 
     pos = $(this).attr("id"); 
     alert(pos); 
    }); 
});