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それらが存在しないため、イベント ハンドラーをそれらにバインドできないためです。

http://api.jquery.com/on/を使用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 に答える