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

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になったかは調査中。
※ご存知の方がいればコメントいただければ幸いです!