jQuery click() evento non attivato su elementi HTML caricati con AJAX

Question

il soggetto è piuttosto descrittivo del mio problema, presumo che non funzionerà in questo modo, c'è un modo per farlo funzionare? (Soluzione)?

Qui è il codice che viene caricato tramite la tecnologia 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> 

Ecco il mio evento click:

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

Answer 1

Fare questo.

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

o

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

}); 

Edit:

Come di jQuery 1.7, il metodo .Live() è deprecato. Usa .on() per allegare gestori di eventi. Gli utenti di versioni precedenti di jQuery dovrebbero usare .delegate().

Answer 2

A meno che non si sta chiamando quella funzione .bind() dopo che il markup è caricato su nella pagina, è necessario utilizzare un'altra funzione come .live() o preferibilmente se si utilizza una versione recente di jQuery, .on() perché .bind() sceglie solo gli elementi DOM già presenti durante l'esecuzione mentre .live() e .on () ti offre diverse opzioni di ambito per tenere traccia degli elementi aggiunti alla pagina.

Answer 3

devi riattaccare i gestori di eventi agli elementi aggiunti dinamicamente nel DOM. Il metodo .live è stato ampiamente utilizzato, ma ora è deprecato. Nella versione jQuery 1.7+ è possibile utilizzare .on o in alternativa è possibile utilizzare .delegate

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

}); 

utilizzando delegato

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

}); 

Answer 4

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