0

div を動的に展開するための次の Javascript jQuery コードを検討してください。

$('.expandingThumbnail').hover(function() {
    $(this).animate({
        height: '32px',
        width:  '32px'
    }, 500);
},function() {
    $(this).animate({
        height: '128px',
        width: '128px'
    }, 500);
});

理論上のdivで動作しています：

<div class="expandingThumbnail">Hi!</div>

この div がページ リクエストの一部として返される限り、期待どおりに展開されます。ただし、この div が AJAX 要求の一部として返され、jQuery のメソッドを介して別の div に挿入された.html()場合、div は期待どおりに展開されません。これはなぜですか? また、どうすれば回避できますか?

4

1 に答える 1

2

これは、動的に生成されたコンテンツの典型的な問題です。ダイレクト イベント ハンドラーは、呼び出されたときに既に存在する要素にのみ適用されます。新しい要素によってトリガーされるイベントを処理するには、ハンドラーを静的な親要素にバインドする必要があります。詳細.onについては、を参照してください。パフォーマンスを向上させるために、以下を最も近い静的な親要素のセレクターに置き換えることができる (そしてそうすべきである) ことに注意してください。document.expandingThumbnail

$(document).on( 'mouseenter', '.expandingThumbnail', function() {
    $(this).animate({
        height: '32px',
        width:  '32px'
    }, 500);
}).on('mouseleave', '.expandingThumbnail', function() {
    $(this).animate({
        height: '128px',
        width: '128px'
    }, 500);
});
于 2012-10-03T11:20:40.380 に答える