javascript - jQuery追加事件问题

Question

我正在尝试构建一个用于练习的纸牌游戏设计，但我一直坚持添加手部动画。有一次，我认为使用 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/

谢谢。

Answer 1

从被点击的元素中移除点击事件，然后只将新的点击事件添加到被点击的元素。

$('.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/