。on（'click'，function（）{}）仅在第一次单击时起作用

Question

我正在制作二十一点游戏以锻炼我的Javascript技能。我有一堆alert()消息与投注功能相关联，以防止输入无效。在更新代码以使其具有比浏览器警报更优雅的消息样式时，我编写了一个名为alertModal()的函数，该函数会在屏幕上弹出一条消息，然后逐渐消失。用户第一次尝试输入无效的投注时会弹出该消息，但是如果该投注无效，则不会弹出任何其他消息-不会发生任何事情。我知道当用户再次单击时placeBet()功能仍在运行，因为如果下注有效，则dealFirstCards()将运行并且游戏继续进行。因此，在我看来，由于某些原因，placeBet()函数的if / else部分仅在第一次单击时运行...

游戏已在http://cnb-blackjack.netlify.com/game.html上运行并使用此代码运行>

这里是有问题的javascript代码：

// Player places a bet
    $('div.bet').on('click', function() {
        $(this).removeClass('glow');
        $('.bet-button').addClass('glow');
    });
    $('.bet-button').on('click', function() {
        event.preventDefault();
        if (!placeBet.called) {
            placeBet();
        }
    });

// PLACE BET
    function placeBet() {
        var $bet = parseInt($('.bet-input').val())
        var $bank = parseInt($('.player-bank').text())
        var $currentBet = $('.current-bet');
        if (!isNaN($bet) && $bet <= $bank && $bet !== 0) {
            $currentBet.text(' $' + $bet);
            $('.bet input[type="text"]').val('');
            $('.place-bet .hideaway').slideUp();
            $('.player-bank').text($bank - $bet);
            placeBet.called = true;
            dealFirstCards();
        } else if ($bet > $bank) {
            var $message = 'Bet cannot exceed the amount in your Bank!';
            alertModal($message);
        } else if (isNaN($bet)) {
            var $message = 'Enter a number, without "$".';
            alertModal($message);
        } else if ($bet === 0) {
            var $message = "Betting nothing won't get you very far...";
            alertModal($message);
        }
    }

// SHOW MODAL
    function alertModal(message) {
        $popUp = $('.alert-message');
        $('.modal').removeClass('hide');
        $popUp.text(message);
        setTimeout(function() {
            $('.modal').fadeOut(1000);
        }, 1000);
    }

我正在制作二十一点游戏以锻炼我的Javascript技能。我有一堆与下注功能绑定的alert（）消息，以防止输入无效。在更新代码以使其更优雅时...

Answer 1

function alertModal(message) {

        $popUp = $('.alert-message');
        $('.modal').show();
        $popUp.text(message);
        setTimeout(function() {
            $('.modal').fadeOut(1000);
        }, 1000);
    }