¿Cómo puedo aplicar una función jquery a elementos cargados con ajax?
<span class="h">Test</span><br /><br />
<span class="h">Test</span><br /><br />
<span class="h">Test</span><br /><br />
....
<span class="h">Test</span><br /><br />
<script type="text/javascript">
$(document).ready(function() {
$('.h').click(function() {
alert("test");
});
});
</script>
Entonces, esto funciona perfectamente. Cada clic en un elemento span devuelve una alerta. Pero allí la función de clic no se aplica a los elementos cargados con ajax:
<span class="h">Test</span><br /><br />
<span class="h">Test</span><br /><br />
<span class="h">Test</span><br /><br />
....
<span class="h">Test</span><br /><br />
<script type="text/javascript">
$(window).scroll(function(){
if ($(window).scrollTop() == $(document).height() - $(window).height()) {
$('body').append('<span class="h">Test3</span><br /><br />');
}
});
$(document).ready(function() {
$('.h').click(function() {
alert("test");
});
});
</script>
¿Cómo puedo resolver ese problema?
6 respuestas
live() es lo que querrá de jQuery:
$('.h').live('click', function () {
// Do something!
}
Debe usar live en lugar de click, para que el evento se vincule también a los elementos recién agregados:
$('.h').live('click', function() {
alert("test");
});
Necesita la función live para vincular el evento a elementos creados dinámicamente:
$('.h').live('click', function() {
alert("test");
});
La función click() solo agrega un oyente a los elementos presentes en el momento en que se llamó. Debe volver a llamarlo en cualquier elemento que agregue más adelante.
O, como dijo @jerluc, use la función live().
No estás volviendo a aplicar el comportamiento. Debe utilizar el método live de jQuery para seguir comprobando el DOM en busca de nuevos elementos.
$(document).ready(function() {
$('.h').live('click', function() {
alert("test");
});
});
Preguntas relacionadas
Preguntas vinculadas
Nuevas preguntas
javascript
Para preguntas sobre la programación en ECMAScript (JavaScript / JS) y sus diversos dialectos / implementaciones (excepto ActionScript). Incluya todas las etiquetas relevantes en su pregunta; por ejemplo, [node.js], [jquery], [json], etc.