有人能告诉我为什么我的第二次点击功能不适用于我的插件吗？ [复制]

Question

    return this.each(function(){
        
        const $gameDiv = $("#rps_game");
        let $image1, $image2, $imageCaption, html;
        let gameAmount = 0;
        
        setGameStart();
        $(this).find("#gameAmount button").click(function(event){
            event.preventDefault();
            if (parseInt($(this).val()) == 1){
                gameAmount = 1;
            }else if(parseInt($(this).val()) == 3){
                gameAmount = 3;
            }else if(parseInt($(this).val()) == 5){
                gameAmount = 5;
            }
            console.log(gameAmount);
            setGameProperties();
        });
        
        $(this).find("#choices button").click(function(event){
            event.preventDefault();
            console.log("TEST");

        });function setGameProperties(){
            $gameDiv.empty();
            html = ('<img src="images\\question.png" id="player1" alt="Item 1">\
            <img src="images\\question.png" id="player2" alt="Item 2">\
            <br>\
            <h3 id="score">0 - 0</h3>\
            <br>\
            <div id="choices">\
                <button type="button" id="1" value="1">Rock</button>\
                <button type="button" id="2" value="2">Paper</button>\
                <button type="button" id="3" value="3">Sissors</button>\
            </div>');
            $gameDiv.append(html);
            $("img").css({
                "width": settings.imageWidth,
                "height": settings.imageHeight,
                "border": settings.imageBorder,
                "border-radius": settings.borderRadius
            });

            $gameDiv.css({
                "text-align": "center",
            });
        };

        function setGameStart(){
            $gameDiv.empty();
            html = ('<div id="gameAmount">\
            <button type="button" id="1game" value="1">Best of 1</button>\
            <button type="button" id="3game" value="3">Best of 3</button>\
            <button type="button" id="5game" value="5">Best of 5</button>\
            </div>');
            $gameDiv.append(html);
        };
    })
}}(jQuery))

我无法弄清楚为什么我的第二次点击功能不起作用。如果我将 setGameProperties() 从第一次单击函数移到它的外部，那么我的第二次单击函数可以工作，但它会跳过 setGameStart() 函数并直接转到 setGameProperties()。谁能告诉我为什么我不能在我的点击函数中使用 setGameProperties() 或者我如何重写这段代码来工作？

Answer 1

我认为有必要查看您的 HTML，因为它无法正常工作可能有多种原因。

我简化了逻辑，发现这段代码运行良好，所以一定是其他原因造成了问题。

您还试图在一些随机上下文中查找元素，所以我将其更改为与 DOM 一起使用

JS：

    setGameStart();
    $("#gameAmount button").click(function(event){
        event.preventDefault();
        console.log("hi");
        setGameProperties();
    });
    
    $("#choices button").click(function(event){
        event.preventDefault();
        console.log("TEST");

    });function setGameProperties(){
 }
    function setGameStart(){
    }

HTML：

<div id="gameAmount"><button>gameAmount</button>
</div>
<div id="choices"><button>choices</button>
</div>