Class変更後のクリック動作

重力四目並べのプログラムをJSで作成しています。
選択したマスの1段上のクリックを可能にする処理を作成したのですが、
classの書き換えはできているけどクリックが動作しないのでどこを修正したら良いか教えてください。

chair.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="styles.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script> 
  </head>
  <body>
    <table>
      <thead>
        <tr>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="disable"> </td>
          <td class="disable"> </td>
          <td class="disable"> </td>
          <td class="disable"> </td>
          <td class="disable"> </td>
          <td class="disable"> </td>
        </tr>
        <tr>
          <td class="disable"></td>
          <td class="disable"> </td>
          <td class="disable"> </td>
          <td class="disable"> </td>
          <td class="disable"> </td>
          <td class="disable"> </td>
        </tr>
        <tr>
          <td class="disable"> </td>
          <td class="disable"> </td>
          <td class="disable"> </td>
          <td class="disable"> </td>
          <td class="disable"> </td>
          <td class="disable"> </td>
        </tr>
        <tr>
          <td class="disable"> </td>
          <td class="disable"> </td>
          <td class="disable"> </td>
          <td class="disable"> </td>
          <td class="disable"> </td>
          <td class="disable"> </td>
        </tr>
        <tr>
          <td class="disable"> </td>
          <td class="disable"> </td>
          <td class="disable"> </td>
          <td class="disable"> </td>
          <td class="disable"> </td>
          <td class="disable"> </td>
        </tr>
        <tr>
          <td class="able"> </td>
          <td class="able"> </td>
          <td class="able"> </td>
          <td class="able"> </td>
          <td class="able"> </td>
          <td class="able"> </td>
        </tr>
      </tbody>
    </table>
    <script src="chair.js"></script>
  </body>
</html>

chair.js

'use strict';
{
  var nowPlayer = true;

// クリック可能なマスか判定
  jQuery(function(){
    jQuery('.able').click(function(){
      if(jQuery(this).hasClass('firstStrike') || jQuery(this).hasClass('secondAttack')){
        return false;
      }else{
        AddClass(this);
      }
    });
  });

// クリックしたマスの1段上を選択可能にする
  function changeCLass(getClass){
    var changeNUm = jQuery('td').index(getClass)-6;
    jQuery('td').eq(changeNUm).removeClass('disable').addClass('able');
    
}

// クリックしたマスの色変更
  function AddClass(getClick){
    NowPlay(nowPlayer);
      if(nowPlayer == true){
        jQuery(getClick).addClass('firstStrike');
        changeCLass(getClick);
        nowPlayer = false;
        return nowPlayer;
      }else{
        jQuery(getClick).addClass('secondAttack');
        changeCLass(getClick);
        nowPlayer = true;
        return nowPlayer;
      }
  }

// 出番のプレイヤーを設定
  function NowPlay(nowPlayer){
    jQuery.cookie('nowPlayer',nowPlayer);
  }
  
}

styles.css

table,thead,tbody{
  border: 1px solid #ddd;
}
table{
  margin: 0 auto;
}

th,td{
  border: 1px solid #eee;
}

td{
  width: 50px;
  height: 50px;
}

.hidden-td{
  border: 1px solid white;
}

.firstStrike{
  background-color: red;
}

.secondAttack{
  background-color: green;
}

行動規範の内容に同意します

回答1件

js
1    jQuery('.able').click(function(){

このコードが実行されたとき、実行された時点で .able に該当する要素にだけイベントリスナーが登録されます。このコードより後にクラスを変更しても勝手にイベントリスナーが登録されたりはしません。

動的にイベントリスナーを付け外しするのはたいへん手間なので、

able でも disable でも同じイベントリスナーを登録して、イベントリスナー内でableクラスを持つ場合だけ処理を行う、または
document にイベントリスナーを登録する。

js
1document.addEventListener('click', event => {
2  if (event.target.closest('.able')) {
3    // event.target に対するクリック処理
4  }
5});

投稿2021/05/30 13:12

int32_t

総合スコア20980

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

Class変更後のクリック動作

関連した質問