Jquery/Javascript提交按钮：第一次成功，第二次重新加载页面

我正在做一个简单的小测验，我的脚本加载了一个新问题和新答案。我的提交按钮只在第一次工作，如果我在第二次选择答案并按提交，脚本/页面似乎会重新加载。为什么?

JSFiddle：

如何：选择第二个答案（Gul、Grøn、Blå）并按“SVAR”。它会说你是对的。然后按下按钮“FORTSÆT”。新问题。选择任意按钮并按提交。错误
我希望你能破解我的脚本和语言；）问问你是否需要更多信息

代码：

$（文档）.ready（函数（）{
无功电流=0；
var spg=[{
“问题”：“巴西利亚国旗在哪里？”，
“回答1”：“Rød，Grøn，Gul”，
“回答2”：“居尔，格伦，比勒姆”，
“回答3”：“Hvid，Grøn，Rød”，
“答复4”：“Blå，Rød，Hvid”，
“正确”：“Gul，Grøn，Blå”
}, {
“问题”：“是否有意大利国旗？”，
“回答1”：“居尔，格伦，罗德”，
“回答2”：“Blå，Grøn，Gul”，
“回答3”：“Rød，Gøn，Hvid”，
“答复4”：“Hvid，Rød，Blå”，
“正确”：“Rød，Gøn，Hvid”
}, {
“问题”：“哈尔克·法尔弗是否有澳大利亚国旗？”，
“回答1”：“格伦、古尔、罗德”，
“回答2”：“格伦、古尔、比勒什”，
“回答3”：“Grøn，Hvid，Rød”，
“答复4”：“Rød，Blå，Hvid”，
“正确”：“Rød，Blå，Hvid”
}, ];
var标志=[{
“开始”：”
}, {
“flags”：“brasil.png”
}, {
“旗帜”：“italy.png”
}, {
“旗帜”：“australia.png”
}, ];
函数问题（）{
$（“#q”）.html（'Spørgsmål:
'+spg[current].question）；
};
问题（）；
函数答案（）{
$（“#a”）.html（'Svarmuligheder:
'++'+spg[current]。answer1++'
'++'+spg[current]。answer2++'
'+'+spg[current]。answer3++'
'+'+spg[current]。answer4++'
'++'；
$（“#继续”）.hide（）；
$（“#forfra”）.hide（）；
};
答案（）；
函数rigtig（）{
event.preventDefault（）；
$（“#c”）.html（'svaret er RIGTIGT:
'+spg[current]。正确）；
$（“#额外”）.html（“”）；
$（“#q”）.html（“”）；
$（“#knapsvar”）.hide（）；
$（“#继续”）.show（）；
美元（1000美元）；
};
$（'#knapsvar'）。单击（函数（）{
event.preventDefault（）；
如果（$（'#2'）。是（':checked'））{
rigtig（）；
}否则{
$（'c'）.html（'Du har ikke valgt rigtigt！Prøv igen'）；
};
});
$（“#继续”）。单击（函数（）{
电流++；
$（“#继续”）.hide（1000）
$（“#c”）.html（“”）
问题（）；
答案（）；
});
$（'#forfra'）。单击（函数（）{
location.reload（）；
});

}))

对“knapsvar”的“click”处理程序的赋值应如下所示：

$('body').on('click', '#knapsvar', function() {
  event.preventDefault();
  // and so on
}

如果这样做，您就解决了当前的问题：每次覆盖问题/答案的HTML时，您就摆脱了事件处理程序分配。换句话说，您现在的代码直接在您创建的元素上设置“click”处理程序。当您创建下一个问题时，您将删除该元素，并随之进行事件处理程序分配

通过使用上面的委托表单，处理程序进入

元素。处理程序响应对id为“knapsvar”的任何目标元素的单击，因此为每个问题生成新的HTML并不重要

---

这并不是最初的主题，但是您可以改进用于问答列表的数据结构，使创建HTML变得更加容易

var spg = [{
    "question": "Hvilke farver har det BRASILIANSKE flag?",
    answers: [
      "Rød, Grøn, Gul",
      "Gul, Grøn, Blå",
      "Hvid, Grøn, Rød",
      "Blå, Rød, Hvid"
    ],
    "correct": 1
}, {
    "question": "Hvilke farver har det ITALIENSKE flag?",
    answers: [
      "Gul, Grøn, Rød",
      "Blå, Grøn, Gul",
      "Rød, Grøn, Hvid",
      "Hvid, Rød, Blå"
    ],
    "correct": 2
}, {
    "question": "Hvilke farver har det AUSTRALSKE flag?",
    answers: [
      "Grøn, Gul, Rød",
      "Grøn, Gul, Blå",
      "Grøn, Hvid, Rød",
      "Rød, Blå, Hvid"
    ],
    "correct": 3
}, ];

现在，要从中构建HTML：

function answers() {
  $("#a").html(
   'Svarmuligheder: <br>' +
   spg[current].answers.map(function(ans, index) {
     return "<input type=radio name=a id=" + index + (class == spg[current].correct ? " class=correct " : "") + "> " +
       ans + "<br>";
   }).join("") +
   '<input id="knapsvar" type="submit" value="Svar"><input id="continue" type="submit" value="fortsæt"><input id="forfra" type="submit" value="forfra">'
 );

函数答案（）{
$（“#a”）.html(
“Svarmuligheder:
”+
spg[current].answers.map（函数（ans，索引）{
返回“”+
ans+“
”；
}).join（“”）+
''
);

现在，检查答案是否正确的代码可以检查选中的单选按钮是否具有“correct”类

---

请注意，参加测试的人可以很容易地检查页面源代码并作弊，这一点无论您如何编写JavaScript代码都是正确的。确保安全的唯一方法是在服务器上检查答案。

谢谢，它成功了。因此，使用此修复程序，它不会重新加载整个页面，只需在下一个任务中将“旧”JavaScript更改为“新”数组中的离子等等？@user1944082所有这些更改都是“click”事件处理程序的绑定方式。所有其他代码都应该可以。您可以执行“continue”和“forfra”处理程序的方式相同，但因为您没有删除和重建DOM的这些部分，所以这不是一个问题。感谢您的详细说明，我已经更改了其余部分以确定。也许您可以帮我做一件事？在#knapsvar函数中，脚本检查要检查的单选按钮（#2）-但当出现新问题时，“正确”单选按钮会改变（#3，然后是#4）。我将如何在#knapsvar if/else语句中跟进？@user1944082好吧，我将改变数据的结构方式和构建选择的方式，以使其更容易。与其跟踪正确答案的文本，我只需在数据中标记正确答案并使用类作为标记。我将扩展答案。非常简单令人印象深刻的尝试，但是当尝试实现您的答案时，出现了一个错误，遗憾的是什么都没有显示？我刚刚用您的建议替换了spg var和answers函数，我遗漏了什么吗？

function answers() {
  $("#a").html(
   'Svarmuligheder: <br>' +
   spg[current].answers.map(function(ans, index) {
     return "<input type=radio name=a id=" + index + (class == spg[current].correct ? " class=correct " : "") + "> " +
       ans + "<br>";
   }).join("") +
   '<input id="knapsvar" type="submit" value="Svar"><input id="continue" type="submit" value="fortsæt"><input id="forfra" type="submit" value="forfra">'
 );