Question

how can I apply a jquery function to elements that are loaded with 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>

So, this works perfectly. Every click on a span element returns an alert.
But there the click function is not applied to the elements loaded with 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>

How can I solve that issue?

Answer 1

jQuery’s live() is what you’ll want:

$('.h').live('click', function () {
  // Do something!
}