JavaScript/jQueryをリセットページ機能にしようとしました

Question

変更を加える前にページをリセットするために呼び出すことができる関数を作成しようとしています。今度は正常なJSが動作しましたが、divの人口を介してクイズの回答を提供してくれた私の他の機能を壊しました。

私はこれは、JSの修正によって壊れます

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

を試してみました。あなたは、イベントハンドラがコピーであることを確認するために、オプションのflagで 'クローンを（）' を実行する必要があります

<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

閉じる...閉じる...概念が欠落しています。
"グローバル変数"は、ページがロードされている間はそのままです。
変更されていない限り。

その後

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が正しくmentionnedとしては、「置き換え」の要素にアクセスするために必要とされる... DOM「ドキュメントオブジェクトモデル」は、これらの変更のnotifedされることはありませんので、あなたがアクセスする方法を気にする必要がありそれらの「新しい」append()後の要素、prepend()、before()、after()、replaceWith()、等...

あなたはeventは、「静的」の要素に、トリガされ、特に1、機能を「添付」なかれする必要があり、デリゲート...または「静的」要素から始めて、findまたはを使用します。をターゲットにします。

また、event.targetトリックもあります...いくつかの用途には。

$("#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にはないものは動的です。»
«静的、動的になることができます»
«静的要素が...動的要素/コンテンツを保持する "ラッパー" を考える»

Answer 2

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

HTML（それがお手伝いします場合はわかりません） /同様にクローン化された。デフォルトでは、ハンドラーはコピーされないため、置き換え後にイベントがトリガーされない可能性が最も高くなります。次のことを試してみてください。

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

そうでなければ、あなたが削除されないとDOMに再追加要素をターゲットとクリックイベントのために#healthの各サブ要素をターゲットにevent delegationを使用します。

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

うまくいけば助けて！