¿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?

1
wendel 5 jul. 2011 a las 13:50

6 respuestas

La mejor respuesta

live() es lo que querrá de jQuery:

$('.h').live('click', function () {
  // Do something!
}
2
jerluc 5 jul. 2011 a las 09:52

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");
});
0
Nicola Peluchetti 5 jul. 2011 a las 09:53

Necesita la función live para vincular el evento a elementos creados dinámicamente:

$('.h').live('click', function() {
    alert("test");
});
0
James Allardice 5 jul. 2011 a las 09:53

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().

0
nfechner 5 jul. 2011 a las 09:52

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.

Demostración de vivir

0
El Ronnoco 5 jul. 2011 a las 09:55
     $(document).ready(function() {
         $('.h').live('click', function() {
            alert("test");
         });
     });
0
BonyT 5 jul. 2011 a las 09:55