Question

我试图制作一个可以调用的功能，将页面重置为修改前的状态。现在普通的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（不确定它是否有帮助）

<div class="container" id="health">
  <div class="row dropable-area">
    <div class="col-sm-12">
      <div class="row">
        <div class="col-sm-6">
          <div class="dropbox panel panel-default" ondrop="drop(event)" ondragover="allowDrop(event)">
          </div>
        </div>
        <div class="col-sm-6">
          <div class="dropbox panel panel-default" ondrop="drop(event)" ondragover="allowDrop(event)">
          </div>
        </div>
        <div class="col-sm-6">
          <div class="dropbox panel panel-default" ondrop="drop(event)" ondragover="allowDrop(event)">
          </div>
        </div>
        <div class="col-sm-6">
          <div class="dropbox panel panel-default" ondrop="drop(event)" ondragover="allowDrop(event)">
          </div>
        </div>
        <div class="col-sm-6">
          <div class="dropbox panel panel-default" ondrop="drop(event)" ondragover="allowDrop(event)">
          </div>
        </div>
        <div class="col-sm-6">
          <div class="dropbox panel panel-default" ondrop="drop(event)" ondragover="allowDrop(event)">
          </div>
        </div>
        <div class="col-sm-6">
          <div class="dropbox panel panel-default" ondrop="drop(event)" ondragover="allowDrop(event)">
          </div>
        </div>
        <div class="col-sm-6">
          <div class="dropbox panel panel-default" ondrop="drop(event)" ondragover="allowDrop(event)">
          </div>
        </div>
        <div class="col-sm-6">
          <div class="dropbox panel panel-default" ondrop="drop(event)" ondragover="allowDrop(event)">
          </div>
        </div>
        <div class="col-sm-6">
          <div class="dropbox panel panel-default" ondrop="drop(event)" ondragover="allowDrop(event)">
          </div>
        </div>
      </div>
    </div>
  </div>

Answer 1

您需要使用可选的nonce method运行'clone（）'，以确保事件处理程序也被复制/克隆。默认情况下，不会复制处理程序，这很可能是更换后事件未触发的原因。请尝试以下方法：

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

否则，您会定位一个未被删除并重新添加到DOM的元素，并使用flag定位#health的相应子元素以进行点击事件：

$userService = $this->container->get('userservice');
$users = $userService->findAll();

$pointPerUser = array();
foreach ($users as $user){
        $userSubmissions = $user->getSubmissions();
        $pointPerUser[$user->getId()] = 0;
        foreach ($userSubmissions as $userSubmission) {
            // Probably here you want to check if the submission is correct
            $pointPerUser[$user->getId()] += $userSubmission->getProblemId()->getPoints();
        } 
}

希望这有帮助！

Answer 2

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

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?
});

然后event delegation正确提及Alexander Staroselsky，需要访问“已替换”的元素...由于DOM“文档对象模型”不会通知这些更改，因此您必须关注关于如何在append()，prepend()，before()，after()，replaceWith()等之后访问这些“新”元素...

你必须总是“附加”函数，特别是event触发的函数，“静态”元素，委托......或者从“静态”元素开始，使用{{1} }或find定位他们。

还有event.target技巧......用于某些用途。

eq

我认为上面的代码应该有用正如您所见，没有任何重大变化。

但细节很重要。

<小时/> «加载DOM时没有什么，是动态的。»
«静态可以变得动态»
«静态元素可以保存动态元素/内容...想想“包装”»

JavaScript / jQuery试图重置页面功能

2 个答案: