Q&A
「どうもうまく動作してくれません」というのは、何がどう動作するはずのものが、どのように期待する動作をしないということなのかを、具体的に質問に書いてください。
JAVASCRIPTで、CSVファイルを読み込んで、それを編集できるようにしたいと思います。
一応、いろんなサイトからの借り物ばかりですが、＜ｔｄ＞要素にEDITというクラスを付けて
それがクリックされたら、入力ＢＯＸが出るようにしています。
しかしながら、クリックしても反応が出ておらず、ＤＯＭツリーとして
解釈されていない様子です。
後付けでテーブルを生成しているので、おそらくスクリプトが先行してしまっているのではないかと思いますが、このような場合のイベント検出はどうやったらできるもでしょうか？
html
1<html> 2<title> 3</title> 4<body> 5 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script> 6 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-csv/1.0.5/jquery.csv.min.js"></script> 7 8<script type="text/javascript"> 9 10$(window).on("load",function(){ 11 var csvfile = '/strages/pandas_test.csv'; 12 13 $.get(csvfile, readCsv, 'text'); 14 function readCsv(data) { 15 var target = '#csv-body'; 16 var csv = $.csv.toArrays(data); 17 var insert = ''; 18 $(csv).each(function() { 19 if (this.length > 0) { 20 insert += '<tr>'; 21 $(this).each(function() { 22 insert += '<td class="edit">' + this + '</td>'; 23 }); 24 insert += '</tr>'; 25 } 26 }); 27 $(target).append(insert); 28 } 29}); 30</script> 31 32<table class="speclist"> 33 <tbody id='csv-body' /> 34</table> 35 36<style> 37 .speclist table, 38 .speclist th, 39 .speclist td { 40 border: solid 1px #ccc; 41 /*グレーの枠線の指定*/ 42 padding: 4px; 43 /*セルの内側に上下左右に4px余白をあける*/ 44 } 45 46 .speclist th { 47 background: #eee; 48 /*見出しの背景をグレーにする指定*/ 49 } 50</style> 51 52<script type="text/javascript"> 53 54$(document).ready(function(){ 55 var tdNods = $("td.edit"); 56 console.log(tdNods); 57 tdNods.click(tdClick); 58}); 59 60 function tdClick(){ 61 var td = $(this); 62 var tdText = td.text(); 63 td.empty(); 64 var input = $("<input>"); 65 66 input.attr("value",tdText); 67 td.append(input); 68 69 input.blur(function(){ 70 var input = $(this); 71 var inputText = input.val(); 72 var td = input.parent("td"); 73 td.html(inputText); 74 td.click(tdClick); 75 }); 76 input.keyup(function(event){ 77 var myEvent = event || window.event; 78 var keyCode = myEvent.keyCode; 79 if(keyCode == 27){ 80 input.val(tdText); 81 } 82 }); 83 var inputDom = input.get(0); 84 inputDom.select(); 85 td.unbind("click"); 86 } 87 </script> 88</body> 89</html>
回答2件
0
jQuery
1$(document).on('click', 'td.edit', tdClick);
投稿2019/10/24 04:55
総合スコア13749
0
ベストアンサー
予想されている通り、$(document).readyと、$(window).on("load", ...、の記述の違いによって、意図しない順序で処理が行われているのだと思います。
多分readyの方が、loadより早いと思いますが、なにぶん「ブラウザ任せのタイミングで実行」となりますので、このように混在させた場合、【HTMLの構成内容】や【PCスペック】【ブラウザ】【回線環境】・・・などからも影響を受けるはずなので、「100％絶対この順番で処理されます」といった保証は出来なくなります。
ということで、順番を守ってほしい処理は、一か所にまとめて順番通りにコードを記述する、が一番確実かなと思います。
javascript
1function readCsv(data) { 2 var target = '#csv-body'; 3 var csv = $.csv.toArrays(data); 4 var insert = ''; 5 $(csv).each(function() { 6 if (this.length > 0) { 7 insert += '<tr>'; 8 $(this).each(function() { 9 insert += '<td class="edit">' + this + '</td>'; 10 }); 11 insert += '</tr>'; 12 } 13 }); 14 $(target).append(insert); 15 //ここまでは同じ 16 17 //テーブル生成が終わってから、イベント付与 18 $("td.edit").click(tdClick); 19}
あるいは、最初からDOM上に存在している親要素に対して、イベントを設定する方法でも良いと思います。
画面をリロードせずに、テーブルを作り直す可能性がある場合は、こちらの方が簡単かも・・？
javascript
1$(document).ready(function(){ 2 $('#csv-body').on('click', 'td.edit', tdClick); 3});
※上記コードは、どちらも未検証です。
ご参考までに。。。
投稿2019/10/24 03:43
総合スコア1910
あなたの回答
tips
プレビュー
