ボタンを押すとリセットされるようにしたい

Question

どうぶつ将棋のゲームを作成しており、ゲームが終了した時（勝敗が決まった時）用にリセットボタンを作りたいと考えています。
現在は、変数testにリセットしたい部分のコードをhtml()を使用して保存しておき、ボタンを押すと変数testを呼び出してリセットしているのですが、見た目は初めの状態に戻るのですが、jQueryが効かなくなってしまい（駒をクリックしても動かなくなってしまい）困っております。
どのようにすればうまくいくのか全く見当も付かずお手上げ状態です。
もし、わかる方がいらっしゃいましたらご教授いただければ幸いです。

<div id="all_cover" class="all_cover">
  <div class="player2_space">
   
  </div>

  <table class="box_cover">
    <tr class="row1">
      <td class="r1_low1 r1 l1" id="1">
        <div id="e_giraffe" class="item player2_item giraffe">
          <img src="./img/キリン.png">
        </div>
      </td>
      <td class="r1_low2 r1 l2" id="2">
        <div id="e_lion" class="item player2_item lion">
          <img src="./img/ライオン.png">
        </div>
      </td>
      <td class="r1_low3 r1 l3" id="3">
        <div id="e_elephant" class="item player2_item elephant">
          <img src="./img/象.png">
        </div>
      </td>
    </tr>
    <tr class="row2">
      <td class="r2_low1 r2 l1" id="4">
      </td>
      <td class="r2_low2 r2 l2" id="5">
          <div id="e_chick" class="player2_item chick item">
            <img src="./img/ひよこ.png">
          </div>
      </td>
      <td class="r2_low3 r2 l3" id="6">
      </td>
    </tr>
    <tr class="row3">
      <td class="r3_low1 r3 l1" id="7">
      </td>
      <td class="r3_low2 r3 l2" id="8">
          <div id="m_chick" class="chick item player1_item">
            <img src="./img/ひよこ.png">
          </div>
      </td>
      <td class="r3_low3 r3 l3" id="9">
      </td>
    </tr>
    <tr class="row4">
      <td class="r4_low1 r4 l1" id="10"> 
        <div id="m_elephant" class="item elephant player1_item">
          <img src="./img/象.png">
        </div>
      </td>
      <td class="r4_low2 r4 l2" id="11">
        <div id="m_lion" class="item lion player1_item">
          <img src="./img/ライオン.png">
        </div>
      </td>
      <td class="r4_low3 r4 l3" id="12">
        <div id="m_giraffe" class="item giraffe player1_item">
          <img src="./img/キリン.png">
        </div>
      </td>
    </tr>
  </table>
  <div id="m_chicken" class="chicken item player1_item none">
    <img src="./img/ニワトリ.png">
  </div>
  <div id="e_chicken" class="chicken item player2_item none">
    <img src="./img/ニワトリ.png">
  </div>
  
  <div class="player1_space">
  </div>

</div>

var test=$('.all_cover').html();

$('.btn').click(function(){
    $('.all_cover').html(test);
  });

Answer 1

単に「新しく差し替えられたHTMLの要素に対してイベントが付与されてない」のだと思います。
$('.btn').on('click',function(){のように書くと「現在読み込まれている要素」指定になるので、これを動的に与える必要があります。
↓
$(document).on('click','.btn',function(){
のようにすると良いです。第二引数が要素名。
あとは「コマを動かす」要素に同じようにあてていってください。

ただ、htmlガボッと全体持つよりも、各コマの名前と初期位置をオブジェクト(配列形式)で持っておいて初期化メソッドを用意し、画面初期表示時とリセットボタン押下時に実行させるようにした方が良さそうには思います。

Comments

[knight1220]

クリックイベントを全て教えて頂いた形に修正することで動くようになりました！
ありがとうございました！

[m.ts10806]

解決したようで何よりですが、回答に書いたようにhtml全体持つのは汎用性に欠けますし、あまりシステマチックではありません。
要素の配置からJavaScriptで制御した方がよりアプリケーションとして拡張性の高いものになると思います。

[knight1220]

アドバイスありがとうございます。
教えて頂いたように配列形式に初期配置を設定して呼び出す方法も試してみたいと思います。

Answer 2

メインの処理が一切書かれていないので判断できませんが
盤面上のコマの位置以外にJavascript上コマの位置を設定している変数が存在し
それがリセットされなので、画面は更新されるが処理的には終わった状態ある為動かないとかではありませんか？

Comments

[knight1220]

メインのコードを載せると多すぎて載せることができなかったので載せませんでした。
申し訳ございません。
<td>をクリックしたときにクラスをつけたり外したりすることで駒が動くようにしているので、htmlをリセットすることで処理が終わっている為に動かないというわけではないと思っているのですが…
teratailに追加でコードを載せることはできないのでしょうか？