1

私は頭を悩ませることができない非常に基本的な問題を抱えているようです。誰かが私を助けてくれることを願っています...

3 つの「ページ」div を含む「ラッパー」div があります。右端の div をクリックすると、これが中央の div になります。最初に最初の子 div を複製して最後に追加し、次に「ラッパー」div を左にアニメーション化してから、元の最初の子 div を削除して「ラッパー」div の元の位置を復元することで、これを行う良い方法を見つけました。

しかし問題は、これが元の DOM の最初のクリックでしか機能しないことです。つまり、追加された div を新しい最後の子として認識しません。誰か助けてもらえますか?

Jクエリ

$(document).ready(function() {
            $('#wrapper div:last-child').click(function() {
                $('#wrapper').animate({'left' : '-33%' }, 500, function() {
                    $('#wrapper div:first-child').clone(true).appendTo('#wrapper');
                    $('#wrapper div:first-child').remove();
                    $('#wrapper').css('left', '0');
                });
            });
        });

HTML

    <div id="wrapper">
        <div class="page" id="p1">1st</div>
        <div class="page" id="p2">2nd</div>
        <div class="page" id="p3">3rd</div>
    </div>
4

1 に答える 1

2 
$('#wrapper').on('click', 'div:last-child', function() {
    $('#wrapper').animate({
        'left': '-33%'
    }, 500, function() {
        $('#wrapper div:first-child').clone(true).appendTo('#wrapper');
        $('#wrapper div:first-child').remove();
        $('#wrapper').css('left', '0');
    });
});

divを動的に追加している#wrapperため、デリゲート イベント ハンドラーが必要です。jQuery.on()を使用すると、上記のようにバインドできますclick。

.on()デリゲート イベントの構文は次のとおりです。

$( staticParent ).on( eventName, targetChild, handler);

ここで、staticParent動的ではない対象要素(動的要素)のコンテナを指します。

于 2012-07-18T19:14:33.777 に答える