JavaScript/jQuery正在尝试创建重置页面函数

我正在尝试创建一个函数，可以调用该函数将页面重置为修改前的状态。现在，正常的JS一个工作，但它打破了我的另一个功能，通过div人口为测验提供答案

我试过了

var originalState = $("health").clone();  

$(".reset").click(function() {
 console.log('called');
 console.log(originalState);
$("health").replaceWith(originalState.clone());
 console.log(originalState);
});

还有香草脚本

var container = document.getElementById("health");
var content = container.innerHTML;

//function reset() {
  //var container = document.getElementById("health");
  //container.innerHTML = html;
  //answers = [];
//}

var html;
window.onload = function() {
  html = document.getElementById("health").innerHTML;
};

这会被JS修复程序破坏

$(".correctKey").click(function() {
    $(".dropbox").each(function(index) {
        $(this).text(correctAnswers[index]);
        answers = correctAnswers.slice();
    });
});

HTML（不确定是否有用）

---

您需要运行带有可选选项的“clone（）”，以确保事件处理程序也是副本/克隆的。默认情况下，不会复制处理程序，这很可能是替换后不会触发事件的原因。请尝试以下操作：

$("#health").replaceWith(originalState.clone(true));

否则，您将针对一个未被删除并重新添加到DOM的元素，并使用该元素针对单击事件的#health的相应子元素：

$("#health").on("click", ".subitemClass", function(event) {});

---

希望这有帮助

关闭。。。接近。。。只是缺少概念。
只要加载页面，“全局变量”就会保持不变…
只要它没有改变

var originalState = $("health").clone();   // Global variable holding
                                           // the "onload state" html.

$(".reset").click(function() {
  console.log('Reset called');
  $("health").replaceWith(originalState);  // HERE, originalState is the global variable.
                                           // Not the original element itself.
                                           // No need to re-clone it.

  answers = []:                            // Reset this variable too?
});

然后，正如正确提到的，需要访问元素“替换”。。。由于DOM“Document Object Model”不会通知这些更改，因此您必须关心如何在、、等之后访问这些“新”元素

您必须始终将函数（尤其是

事件

触发的函数）“附加”到“静态”元素，并委派。。。或者从“静态”元素开始，使用

find

或

eq

来定位它们

还有一个窍门。。。有些用途

$("#health").on("click", ".correctKey", function() {    // [event], [target], [function]
  $("#health").find(".dropbox").each(function(index) {  // Always start form a "static" element.
    $(this).text(correctAnswers[index]);

    answers = correctAnswers.slice();                   // I don't know what you do with this variable.
                                                        // But there a possible need to reset too...
  });
});

我认为上面的代码应该有效。
正如你所看到的，没有明显的大变化

但细节很重要

---

«加载时DOM中没有的是动态的。»
«静态可以变成动态»

---

«静态元素可以容纳动态元素/内容。。。想想“包装纸”»

谢谢你花时间尝试和帮助，是笔。我尝试了你的方法，由于某种原因它不起作用，所以我也尝试了我原来的JS脚本，它确实起作用了，现在也没有重置它。你能看看你是否能发现哪里出了问题，或者可能只是一支坏了的笔吗？事实上，这是复位工作的笔，但是只有在复位之前按下了“应答”键时才会显示。我在中修复了“应答键”按钮的功能。它现在似乎允许重置，但唯一的问题是显示[object HtmlLevel]，而不是数组的实际值？Codepen，如果在重置按钮之前按下应答键，则应答键工作。

$("#health").on("click", ".correctKey", function() {    // [event], [target], [function]
  $("#health").find(".dropbox").each(function(index) {  // Always start form a "static" element.
    $(this).text(correctAnswers[index]);

    answers = correctAnswers.slice();                   // I don't know what you do with this variable.
                                                        // But there a possible need to reset too...
  });
});