.on('click', function(){}) 仅适用于第一次点击

Question

I'm making a Blackjack game to exercise my Javascript skills. I had a bunch of alert() messages tied to the betting function to prevent invalid entries. In updating the code to have a more elegant message style than a browser alert, I wrote a function called alertModal() that pops up a message on the screen and then fades away. The message pops up the first time a user tries to enter an invalid bet, but does not pop up any other messages if the bet is invalid-- nothing happens. I know the placeBet() function is still running when the user clicks again, because if the bet is valid, dealFirstCards() runs and the game proceeds. So it seems to me that for some reason, the if/else portion of the placeBet() function is only running on the first click...

The game is live and running with this code at http://cnb-blackjack.netlify.com/game.html

Here is the javascript code in question:

// 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);
    }

Answer 1

function alertModal(message) {

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

As comments have explained, fadeOut is leaving the modal hidden after the first time it's clicked. Just call $(element).show(); on the modal to show it again and let fadeOut remove it.