動的に作成したテーブル内要素のクリックイベントが2回実行される

PHPで動的に作成したテーブルのtdのクリックイベントに発火するjavascriptを書いていて躓きました。

正確には「イベントが2回実行される」のではなく「jsが2回実行されてしまう」のですが。

HTMLはこんな感じ

<td class="fee" data-sn="12" data-fee="25000"><div class="f_val">25,000</div></td>

動的に作成した要素なのでフツーに click などで拾ってはいけない。

▼いけない例

$('.fee').click(function(){
  console.log($(this).data('sn'));
});

というのは、なんとなく知っていた。なので以下のように書いていました。

$(document).on('click','.fee',function(){
  console.log($(this).data('sn'));
});

ところが実行してみると…

undefined ってなに？

2回目に実行された結果です。

調べてみると、拾うと同時に捨てる（オフにする） off(‘click’) などの情報もあり、よかった～と思って書き加えてみるものの

どうにも上手くいかない…うーん…

クラスだけしてしていたところ（セレクタ）を厳密に（td）書いてみた。

$(document).on('click','td.fee',function(){
});

おっ