1

在以下 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() 函数中时，它可以工作，但是非常不稳定。当放在它外面时，如上所述，它根本不会运行。

为什么？我真的很想知道为什么它不会运行。

4

4 回答 4

3

原因是因为在parse您创建h3' 时它们不存在，所以事件处理程序不能绑定到它们。

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

 $("#items").on('click', 'h3',
     function(){
         $(this).next().animate({'height':'toggle'}, 'slow', 'easeOutBounce');
     }
  );
于 2012-04-17T05:07:20.093 回答
1

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

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

用。。。来代替

$('#items').delegate('h3','click',function(){
于 2012-04-17T05:05:30.860 回答
1

好吧，伙计们，这并不像人们想象的那么复杂。为了将事件绑定到动态创建的h3元素，您需要从调用时存在的元素委托它们（在这种情况下，document，因为触发事件ready意味着文档已准备好具有事件绑定到它）。为了使用 jQuery 进行委托on，您需要使用selector参数，如下所示：

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

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

编辑：我想值得注意的是，为了性能起见，您应该在 DOM 中选择一个根元素，使其尽可能接近您尝试以事件为目标的元素，同时在初始事件时保持其就绪状态捆绑。

于 2012-04-17T05:19:16.483 回答
0

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

于 2012-04-17T05:01:55.210 回答