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

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>