0

練習用のカードゲームのデザインを作ろうとしているのですが、手のアニメーションに追加するのに行き詰まっています。当初は、append を使用してから偶数ハンドラーを追加すると機能すると考えていましたが、最後に追加された要素 (この場合は li) に対してのみ機能することが判明しました。簡単にテストできるように、jsfiddle のコードを次に示します。

コード：

$('.deck .card').on('click', function () {
    // $(this).appendTo('.hand')
    $('.hand').append(this)
    $('.hand .card').on('click', function(){
        $(this).addClass('flip')
    })
})

手札のクリックイベントをデッキの外に移動してみましたが、全く動きませんでした。また、テストを容易にするための jsfiddle のコードは次のとおりですhttp://jsfiddle.net/FAZUc/9/

ありがとう。

4

1 に答える 1

4

クリックされた要素からクリック イベントを削除し、クリックされた要素のみに新しいクリック イベントを追加します。

$('.deck .card').on('click', function () {
    // $(this).appendTo('.hand')
    $('.hand').append(this)
    $(this).off('click').on('click', function(){
        $(this).addClass('flip')
    })
})

http://jsfiddle.net/FAZUc/16/

イベント委任により、さらに簡単になります。

$('.deck').on('click', '.card', function () {
    $('.hand').append(this)
});
$('.hand').on('click','.card', function(){
    $(this).addClass('flip')
});

http://jsfiddle.net/FAZUc/18/

于 2013-10-04T19:17:23.357 に答える