Javascript 构造JQuery事件处理的正确方法

目前，我正在开发一个结合使用PHP和JavaScript的纸牌游戏应用程序。但是，我的事件处理遇到了问题。我想要的功能是让玩家能够点击一张卡，然后会显示一条消息，指示再次点击该卡将其翻转。以下是我的基本设置：

function flipPlayerCard($card) {
    gameAlert('Click the card again if you would like to flip it.');
    $compareCard = $card;
    $('body').off().on('click', '.card', function() {
        if ($compareCard.attr('id') == $(this).attr('id')) {
                    console.log('Flipping card');
            //Call the flip player card function
        }
        else {
            gameAlert('');
            resetBinds();
        }
    });
}
function resetBinds() {
    $('body').off().find('.player').eq(turn).find('.card').add('.draw_pile .card').add('.discard_pile .card').on('click', function(event) {
        event.stopPropagation();
        cardSwitch($(this));
    });
}
function cardSwitch($this) {
    $('body').off();
    var type = $this.parent().parent().attr('class');
    switch (type) {
        case 'player':
            flipPlayerCard($this);
            break;
        case 'discard_pile':
            takeDiscardPileCard();
            break;
        case 'draw_pile':
            flipDrawPileCard();
            break;
    }
}
$(document).ready(function() {
    resetBinds();
});

---

在第一次单击时，它工作正常，但在第二次单击时，没有任何内容记录到控制台。我知道必须有更好的方法来处理像这样的连锁事件。我错过了什么？非常感谢您的帮助。

简单一点的可能会更好

function flipPlayerCard( card ) {

    if ( card.hasClass('clicked') ) {
       // code to flip the card
       card.removeClass('clicked');
    } else {
       $('.clicked').removeClass('clicked'); // if clicked on new one, clear old
       card.addClass('clicked');
       gameAlert('Click the card again if you would like to flip it.');
    }
}

---

这样，您就不需要重置事件绑定

函数cardSwitch（$this）{

这是新的…接受它作为参数。OP需要为翻转编写脚本。无法抵抗。我非常确定

.off（）

函数需要一个参数来告诉它要删除哪些处理程序。很好的主意Dom。工作得很好。我对这个问题想得太多了。谢谢！我不确定你到底想让游戏如何工作，但我认为你可能必须在将

单击的
类添加到你想要的卡之前，从所有元素中删除它，这样玩家就不会出现问题I don’’答案：答案：答案：答案：答案：答案：答案：答案：答案：答案：答案：答案：答案：答案：答案：答案：答案：答案：答案：答案：答案：答案：答案：答案：答案：答案：答案：答案：答案：答案：答案：答案：答案：答案：答案：答案：答案