jQuery 可以在函数内部工作，但不能在函数外部工作？

Question

在以下 jQuery 代码中:

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

});

当我将标记为//ANIMATION 的部分放入 parse() 函数中时，该部分可以工作，但非常不稳定。当放在它外面时，如上所述，它根本不会运行。

为什么？我真的把头撞在墙上试图理解为什么它不能运行。

Answer 1

原因是因为在 parse 中您创建了 h3，否则它们不存在，因此事件处理程序无法绑定(bind)到它们。

使用于http://api.jquery.com/on/

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