6
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

tableのtd要素クリック時の処理を書く時につまづいたこと

Posted at

Tableのtd要素をクリックした際の処理を書く時に詰まったことを共有します。
下記にNGパターンとOKパターンを記載します。

■HTMLは下記のような普通のTable

index.html
      <table id="tehuda1">
        <thead>
          <tr>
            <th colspan="5">Player1の手札</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td id="tehuda1-1"></td>
            <td id="tehuda1-2"></td>
            <td id="tehuda1-3"></td>
            <td id="tehuda1-4"></td>
            <td id="tehuda1-5"></td>
          </tr>
        </tbody>
      </table>

■Tableのtd要素をクリックした際の処理。
下記の場合、tdクリック時の処理は呼ばれず。。。

Logic.js(NGパターン)
//TODO(要調査):下記だとtableのtdクリック時の処理は呼ばれない。なぜ??
$('#tehuda1 td').on('click', function(){
  console.log('hoge');
});

しかし、下記だとtdクリック時の処理は呼ばれた。

Logic.js(OKパターン)
//TODO(要調査):この書き方だとtableのtdクリック時の処理が呼ばれる。
$(document).on('click', '#tehuda1 td', function() {
  console.log('hoge');
});

なぜNGになったかは調査中。
※ご存知の方がいればコメントいただければ幸いです!

6
3
3

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?