web-dev-qa-db-fra.com

L'événement jQuery click () ne se déclenche pas sur AJAX éléments HTML chargés

le sujet est assez descriptif de mon problème, je suppose qu'il ne fonctionnera pas de cette façon, existe-t-il un moyen de le faire fonctionner? (solution de contournement)?

Voici le code qui est chargé via AJAX:

<div>
<div id="s0frame" class="sframe"></div>
<div id="s1frame" class="sframe"></div>
<div id="s2frame" class="sframe"></div>
<div id="s3frame" class="sframe"></div>
<div id="s4frame" class="sframe"></div>
<div id="s5frame" class="sframe"></div>
<div id="chatframe" class="chat alpha60"></div>
</div>

Voici mon événement de clic:

$('.sframe').bind('click', function() { 
    var seat_number = this.id.match(/\d/g);
    alert(seat_number); 
});
javascriptjqueryajax
32
Adam Skiba

Faites ça.

 $(document).on("click",".sframe",function(e){
 var seat_number = this.id.match(/\d/g);
 alert(seat_number); 
 });

ou

 $(document).delegate(".sframe","click",function(e){
 var seat_number = this.id.match(/\d/g);
 alert(seat_number); 

 });

Éditer:

Depuis jQuery 1.7, la méthode .live () est obsolète. Utilisez .on () pour attacher des gestionnaires d'événements. Les utilisateurs des anciennes versions de jQuery doivent utiliser .delegate ().

79
Ajeet Sinha

vous devez rattacher les gestionnaires d'événements aux éléments ajoutés dynamiquement dans le DOM. .live La méthode a été largement utilisée mais elle est désormais obsolète. Dans jQuery version 1.7+, vous pouvez utiliser .on ou bien vous pouvez utiliser .delegate

$(document).on("click",".sframe",function(e){

});

utiliser délégué

$(document).delegate(".sframe","click",function(e){

});
16
Rafay

Sauf si vous appelez cette fonction .bind () après le chargement de ce balisage sur la page, vous devez utiliser une autre fonction comme .live () ou de préférence si vous utilisez une version récente de jQuery, .on () car .bind () uniquement cible les éléments DOM déjà présents lors de l'exécution tandis que .live () et .on () vous offrent différentes options de portée pour garder une trace des éléments ajoutés à la page.

4
Aaron
$(document).on('click','sframe', function() { 
    var seat_number = this.id.match(/\d/g);
    alert(seat_number); 
});
2
areeb