テーブルをクリックしてもイベントが発生しない

CSVを読み込んで、テーブルを作り
そのテーブルをクリックしたら、そのテーブル値を表示させることを検討しています

下記のコードですが、セレクタでクリックをしても何も反応がありません

いったい何が悪いのでしょうか？

追記：アドバイス頂いた行を足してみましたが、状況は変わりませんでした
追記；ＯＮ以下も移してみましたが変化ありませんでした

javascript
1
2<html>
3<title>
4</title>
5<body>
6		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
7        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-csv/1.0.5/jquery.csv.min.js"></script>
8		<script src="/static/js/jquery.trocar.js"></script>
9<script type="text/javascript">
10
11var data;
12	$.ajax({
13	  type: "GET",  
14	  url: '/strages/pandas_test.csv',
15	  dataType: "text",       
16	  success: function(response)  
17	  {
18		data = $.csv.toArrays(response);
19		generateHtmlTable(data);
20	  }   
21    });
22
23function generateHtmlTable(data) {
24    var html = '<table id="target">';
25      if(typeof(data[0]) === 'undefined') {
26        return null;
27      } else {
28		$.each(data, function( index, row ) {
29		  //bind header
30		  if(index == 0) {
31			html += '<thead>';
32			html += '<tr>';
33			$.each(row, function( index, colData ) {
34				html += '<th>';
35				html += colData;
36				html += '</th>';
37			});
38			html += '</tr>';
39			html += '</thead>';
40			html += '<tbody>';
41		  } else {
42			html += '<tr>';
43			$.each(row, function( index, colData ) {
44				html += '<td>';
45				html += colData;
46				html += '</td>';
47			});
48			html += '</tr>';
49		  }
50		});
51		html += '</tbody>';
52		html += '</table>';
53		$('#csv-display').append(html);
54
55		$('#target td').on('click', function() {
56              var td = $(this)[0];
57              var tr = $(this).closest('tr')[0];
58              alart('td:' + td.cellIndex,'tr:' + tr.rowIndex,$(this).text());
59            });
60	  }
61    }	
62    
63</script>
64
65<div id="csv-display"></div>
66
67</body>
68</html>
69

hentaiman

2019/10/22 08:30

>> 追記：アドバイス頂いた行を足してみましたが、状況は変わりませんでした回答にある通りonの中身も含めて移動してみましょう

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

回答2件

$('#csv-display').append(html);の次の行に$('#target td').onを移してみてはいかがでしょう。

投稿2019/10/22 08:09

kei344

総合スコア69407

yuujiMotoki

2019/10/22 08:22

ご指示いただいたソースでも動きませんでした。どうやらCSVから作成した後付けのテーブルオブジェクト自体に、セレクタが反応していない感じです。こういう組み方をしたことがないので、何とも言えませんが

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

自己解決

自己解決いたしました。
書き方の問題だったようです。

リンク内容

$(function() {
$(document).on('click','#target td', function(){
var td = $(this)[0];
var tr = $(this).closest('tr')[0];
console.log('td:' + td.cellIndex);
console.log('tr:' + tr.rowIndex);
console.log($(this).text());
});
});