Javascript 事件在应用程序运行的第二轮期间被调用两次

我有一个带计分器的测验应用程序。在第一次运行期间一切正常，但在第二次运行期间回答第二个问题后，记分计数器会被事件调用两次（第二次运行意味着我在第一次执行时使用了“重新启动测验”按钮）。它会被调用两次，并从那时起添加两次点数。 表示事件被绑定两次，我不确定在哪里或如何防止它

if (answerIsCorrect) {
  scoreCounter();
  responseMsg = `
    <h2>Correct</h2>
    <p>On to the next.</p>
    <button role='button' type="button" class='button js-button-subsequent'>Submit & Next
    </button>`;
}

---

请查看

在单击下一步按钮后，只要您单击任何单选按钮，原始代码就会检查答案

function evalChosenAnswer() {
  $(".js-quizform-questions").on("click", "input[type=radio]", event => {
    console.log($(event.currentTarget))
    let answer = $(event.currentTarget)
      .closest(".css-answers")
      .children("label")
      .text();
    renderFeedback(answer);
  });
}

因此，将其替换为以下代码，单击“下一步”按钮后仅检查一次答案

function evalChosenAnswer() {
  $(".js-quizform-questions").on("click", ".js-button-next", event => {

    // check if answer is right or not when click the next button
    let answer = $(event.currentTarget)              // the next button
                 .siblings()                         // find fieldset
                 .find(".css-answers input:checked") // find checked radio button
                 .siblings()                         // find the label
                 .text();                            // get the text
    renderFeedback(answer);
  });
}

并从中删除

函数renderFeedback

中的相同委托单击处理程序

function renderFeedback(answer) {
  $(".js-quizform-questions").on("click", ".js-button-next", () => {
    ... codes ...
  });
}

到

console.clear（）；
常数DB=[{
问题：“离我们太阳最近的恒星是什么？”，
答案：[“半人马座近邻”、“我们的太阳”、“参宿四”、“天狼星”]，
正确答案：“半人马座近邻”
},
{
问题：“哪位美国总统第一次打电话到月球？”，
答复:[
“亨利·杜鲁门”，
“理查德·尼克松”，
“富兰克林·D·罗斯福”，
“吉米·卡特”
],
正确答案：“理查德·尼克松”
},
{
问题：“参宿四和参宿七是哪个星座的两颗巨星？”，
答案：[“仙女座”、“白羊座”、“处女座”、“猎户座”]，
正确答案：“猎户座”
},
{
问题：“在我们的太阳系中，哪颗行星的白天最短？”，
答案：[“地球”、“金星”、“木星”、“水星”]，
正确答案：“木星”
},
{
问题：“海尔·波普被归类为哪种类型的小型太阳系天体？”，
答案：[“彗星”、“小行星”、“流星体”、“流星”]，
正确答案：“彗星”
},
{
问：“从海王星延伸到距离太阳55个天文单位的圆盘状冰体区域叫什么名字？”，
答复:[
“猎户座腰带”，
“哥白尼带”，
“凯瑟腰带”，
“柯伊伯带”
],
正确答案：“柯伊伯带”
},
{
问：“在我们的太阳系中，哪两颗行星被称为冰巨星？”，
答复:[
“金星与火星”，
“海王星和冥王星”，
“天王星和海王星”，
“木星与天王星”
],
正确答案：“天王星和海王星”
},
{
问题：“‘Mare tanquillitatis’是地球月球上发现的什么特征的拉丁名称？”，
答复:[
“宁静之海”，
“冰麻辣”，
“宁静的火星”，
“冷静的马”
],
正确答案：“宁静之海”
},
{
问：“1969年第一批登上月球的两名宇航员是谁？”，
答复:[
“巴斯光年和兰斯”伍迪“阿姆斯特朗”，
“尼尔·阿姆斯特朗和巴兹·奥尔德林”，
“汤姆·奥尔德林和尼尔·戴蒙德”，
“Buzz Adderrall&Neil Aldrin”
],
正确答案：“尼尔·阿姆斯特朗和巴兹·奥尔德林”
},
{
问题：“大红斑是一个巨大的风暴，位于我们太阳系的哪个行星上？”，
答案：[“地球”、“火星”、“木星”、“金星”]，
正确答案：“木星”
}
];
让scoreCount=0；
设numberIncr=0；
函数renderIntro（）{
$（“.js quizform intro”）.show（）；
$（“.js quizform questions”）.hide（）；
$（“.js反馈页”）.hide（）；
$（“.js quizform evaluation”）.hide（）；
}
函数showNext（）{
$（“.js quizform submit”）。在（“单击”，事件=>{
$（“.js quizform intro”）.hide（）；
$（“.js quizform questions”）.show（）；
$（“.js quizform questions”）.html（renderQuestion（））；
});
}
函数renderQuestion（）{
增加计数（）；
返回`
${DB[numberIncr-1]。问题}
${DB[numberIncr-1]。答案[0]}
${DB[numberIncr-1]。答案[1]}
${DB[numberIncr-1]。答案[2]}
${DB[numberIncr-1]。答案[3]}
提交下一个（&N）
`;
}
函数evalChosenAnswer（）{
$（“.js quizform questions”）。在（“单击“，”.js按钮下一步”，事件=>{
//单击“下一步”按钮时，检查答案是否正确
let answer=$（event.currentTarget）.sibbines（）.find（“.css answers输入：选中”）.sibbines（）.text（）；
效果反馈（应答）；
});
}
函数renderFeedback（应答）{
$（“.js quizform问题”）
.empty（）
.hide（）；
const answerIsCorrect=检查答案（答案）；
让responseMsg=“”；
如果（回答正确）{
responseMsg=`正确
继续下一步

提交&下一个`；
记分计数器（）；
}否则{
responseMsg=`不正确，
但是宇宙有很多答案

提交&下一个`；
}
$（“.js反馈页”）
.show（）
.html（responseMsg）；
}
功能检查应答（应答）{
返回答案===DB[numberIncr-1]。正确答案；
}
函数scoreCounter（）{
分数+=10；
$（“.js分数计数器”）.text（分数计数）；
}
函数renderSubsequent（）{
$（“.js反馈页”）。在（“单击“，”.js按钮后续“，（）=>{
如果（numberIncr==3）{
$（“.js反馈页”）.hide（）；
$（“.js quizform评估”）
.show（）
.html（renderScore）；
}否则{
$（“.js反馈页”）.hide（）；
$（“.js quizform问题”）
.show（）
.html（问题）；
}
});
}
函数increaseCount（）{
numberIncr++；
$（“.js问题计数器”）.text（numberIncr）；
}
函数renderScore（）{
返回`
你做到了！
您的最终分数为${scoreCount}。
如果要重试，请单击下面的按钮

提交下一个（&N）
`;
}
函数重载（）{
$（“.js quizform evaluation”）。在（“单击“，”.js按钮重新加载“，（）=>{
$（“.js问题计数器”）.text（0）；
$（“.js分数计数器”）.text（0）；
分数=0；
numberIncr=0
renderIntro（）；
});
}
函数startApp（）{
renderIntro（）；
showNext（）；
//renderFeedback（）
evalChosenAnswer（）；
RenderSubSeq
function renderFeedback(answer) {
  $(".js-quizform-questions").on("click", ".js-button-next", () => {
    ... codes ...
  });
}

function renderFeedback(answer) {
  ... codes ...
}