jqueryで動的に生成したtableのthに対して、mouseenter、mouseleaveが動作しない

Question

以下のコードで、htmlのtableのthにマウスをのせると、吹き出しが出るように設定しています。

  $("#testtable th").on({
      'mouseenter' : function(){
        console.log($(this).text());
        $(".table_hukidashi").text("");
        var index = $("#testtable th").index(this)-1;
        if($(this).text() != "") {
          $(".table_hukidashi").eq(index).text($(this).text());
          $(".table_hukidashi").eq(index).css("display","inline-block");
        }
      },
      'mouseleave' : function(){
        $(".table_hukidashi").css("display","none");
      }
  });

自動作成ではない場合の#testtableのthには、上記コードで吹き出しは表示されますが、自動作成された#testtableでは反応しません。
ちなみに、console.logの結果も表示されないので、全く反応していないようです。

どこを修正すればいいのでしょうか？
有識者の方、お知恵をお貸しください。

Answer 1

$("#testtable th")とした時点で、その時点で存在する要素を選択するため、それ以降に追加された要素にはイベントはセットされません。

$("#testtable").on('mouseenter', 'th', function(){})のようにセットすれば、イベントは#testtableでまとめて拾うので、あとから増えたthにも対応できます。

Comments

[mizutama72]

ご回答ありがとうございます！
上記の通りに修正しましたら、console.logに反応するようになりました。
が、吹き出しが出なくなってしまいました。
htmlでは、
<th >testdata<span class="table_hukidashi"></span></th>
とやっているだけなのですが、tableのthの場合は、何か注意が必要でしょうか？

[maisumakun]

.table_hukidashiもthと合わせて自動生成している感じでしょうか？

[mizutama72]

はい。自動生成しています。

[mizutama72]

動きをみていると、
$(".table_hukidashi").eq(index).css("display","inline-block");
が効かなくなっていたようでした。

[mizutama72]

質問の件は解決致しましたので、一旦閉じます。
ありがとうございました。
助かりました！