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

});

当我将它放在parse（）函数中时，标记为// ANIMATION的部分会起作用，但是非常脆弱。如上所述放置在外面时，它根本不会运行。

为什么呢？我正在试着理解为什么它不能运行，我真的在墙上敲我的头。

Answer 1

原因是因为在parse中你创建了h3，否则它们就不存在，所以事件处理程序不能绑定到它们。

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

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

Answer 2

动态生成内容时，请使用delegate而不是click。

$('#items h3').click(function(){

替换为

$('#items').delegate('h3','click',function(){

Answer 3

好的伙计们，这并不像人们所做的那样复杂。为了将事件绑定到动态创建的h3元素，您需要从调用时存在的元素（在本例中为document）委派它们，因为事件的触发on ready表示文档准备将事件绑定到它上面。为了使用jQuery on进行委派，您需要使用selector参数，如下所示：

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

（this指的是委托目标，而不是根元素document本身。）

编辑：我认为值得注意的是，出于性能的考虑，您应该在DOM中选择一个根元素尽可能接近您尝试以事件为目标的元素，同时保持其准备就绪。最初的事件绑定。

Answer 4

我有同样的问题，我相信我通过将函数包装在空白的jquery函数中来修复它。

在函数内部工作的jQuery ......但不在外面？

4 个答案: