jQuery click() evento no activa elementos HTML cargados de AJAX

Question

el tema es bastante descriptivo de mi problema, supongo que no funcionará de esta manera, ¿hay alguna manera de hacerlo funcionar? (solución)?

Aquí está el código que se carga a través de 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> 

Aquí es mi evento click:

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

Answer 1

Haga esto.

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

}); 

Editar:

Como de jQuery 1.7, está en desuso el método .live(). Use .on() para adjuntar manejadores de eventos. Los usuarios de versiones anteriores de jQuery deben usar .delegate().

Answer 2

A menos que usted está llamando esa función .bind() después de que se carga en el marcado la página, necesita usar otra función como .live() o preferiblemente si usa una versión reciente de jQuery, .on() porque .bind() solo se dirige a elementos DOM ya presentes cuando se ejecuta mientras que .live() y .on () le da diferentes opciones de alcance para hacer un seguimiento de los elementos añadidos a la página.

Answer 3

tiene que volver a conectar los controladores de eventos a los elementos añadidos dinámicamente en el DOM. El método .live se usó ampliamente pero ahora está obsoleto. En la versión de jQuery 1.7+ puede utilizar .on o también, puede utilizar .delegate

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

}); 

usando delegado

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

}); 

Answer 4

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