jQuery函数在控制台中显示，但在第一次单击时不在浏览器中显示，然后在第二次单击时在浏览器中显示两次

Question

I'm pretty befuddled by this bug. Throughout my javascript file, my jQuery functions (like the one at the bottom of the page) don't act on the first click, but act twice on the second click. I'm running Bootstrap as well.

Thanks.

var showLocation = function () {
    console.log("executing showLocation()\n");
    $(document).ready(function () {
            $("#show-game-button").click(function() {
                $(".location-div").show(300);
                    $("#show-game-button").css('display', 'none');
            });
    });
}

Answer 1

You are adding new click listener every time you execute your function. This should be working fine:

$(document).ready(function () {
        $("#show-game-button").click(function() {
            $(".location-div").show(300);
                $("#show-game-button").css('display', 'none');
        });
});

you don't need the showLocation function.