Question

In the following jQuery code:

    $(document).ready(function(){   

    function parse(document){
        $(document).find("entry").each(function(){
            $("#items").append(
                '<h3><a href="#">'+$(this).find('title').text()+'</a></h3>'+
                '<div> '+$(this).find('summary').text()+'</div>'
            );
            $('#items > div').hide();
        });
    }

    $.ajax({
        type: "GET",
        url: 'www.---.com', // name of file you want to parse
        dataType: "xml",
        success: parse,
        error: function(){alert("Error: Something went wrong");}
    });

            //ANIMATION
    $('#items h3').click(function(){
        $(this).next().animate({'height':'toggle'}, 'slow', 'easeOutBounce');
    });

    $('#footer').click(function(){alert("Why does this work, but not the bouncing panels?")});

});

The section marked //ANIMATION works when I place it inside the parse() function, but is very flaky. When placed outside of it, as above, it will not run at all.

Why? I’m really banging my head on the wall trying to understand why it won’t run.

Answer 1

The reason is because in parse you create the h3‘s they dont exist otherwise, so the event handler cannot be bound to them.

Use on http://api.jquery.com/on/

 $("#items").on('click', 'h3',
     function(){
         $(this).next().animate({'height':'toggle'}, 'slow', 'easeOutBounce');
     }
  );