javascript - JQuery イベント処理を構造化する正しい方法

Question

現在、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();
});

最初のクリックでは問題なく動作しますが、2 回目のクリックではコンソールに何も記録されません。このような連鎖したイベントを処理するためのより良い方法が必要であることはわかっています。私は何が欠けていますか？どんな助けでも大歓迎です。