javascriptにて動的にtableを作成しています。
HTML側ではidの前方一致でクリックイベントが実行するよう
実装していますが、動的に作成した項目の場合、イベントが発火しません。
HTML側で記述していますid="text999"はクリックイベントが発火します。

どこか実装に問題がありますでしょうか？
よろしくお願い致します。

javascript
1    var datatable = document.getElementById("datatable");
2    var tr = document.createElement("tr");
3    var td = document.createElement("td");
4    var inp = document.createElement("input");
5
6    inp.id = "text" + index; //indexには連番が入ります
7
8    td.appendChild(inp);
9    tr.appendChild(td);
10    datatable.appendChild(tr);

HTML
1<head>
2    <script>
3        $(function(){
4            // 動的に作成した項目をクリックした時のイベント(前方一致にしています)
5            $("[id^=text]").click(function() { 
6                alert(123);
7            });
8        });
9    </script>
10</head>
11<body>
12    <table id="datatable"></table>
13    
14    <input type="text" id="text999"/>
15<body>

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

回答2件

クリックイベントのところですが、

js
1$("[id^=text]").click(function() { 
2    alert(123);
3});

これだとこの関数を実行した時(イベントハンドラが設定される時)にtext〇〇となっている要素にしかイベントが付与されないので、

js
1$(document).on("click","[id^=text]",function() { 
2    alert(123);
3});

とする必要があると思います。

追記

無事解決済みになって良かったです。

サンプルを作りましたのでよかったらどうぞ。

投稿2018/01/16 08:08

総合スコア2043

2018/01/16 08:38

素早い回答ありがとうございます。無事解決しました。

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

ベストアンサー

動的に追加されたタグをいじる場合は、最初から存在するタグから追いかけてやる
たとえばこう

javascript
1  $('#datatable').on('click','tr td input[id^=text]',function() { 
2    alert(123);
3  });

※上記「tr td」は省略してもOK

追記

ちなみにjqueryを使わないならこんな感じ
(以下ベタに貼り付ければ動きます)

javascript
1<script>
2document.addEventListener('click',function(e){
3  var t=e.target;
4  if(t.nodeName=="INPUT" && t.id && t.id.match(/^text/)){
5    alert('hoge');
6  }
7});
8window.addEventListener('DOMContentLoaded', function(e){
9  var datatable = document.getElementById("datatable");
10  var tr = document.createElement("tr");
11  for(var i=0;i<5;i++){
12    var td = document.createElement("td");
13    var inp = document.createElement("input");
14    inp.id = "text" + i;
15    td.appendChild(inp);
16    tr.appendChild(td);
17  }
18  datatable.appendChild(tr);
19
20});
21</script>
22<table id="datatable"></table>
23<input type="text" id="text999"/>
24<!--
25ゴミタグ(body)を削りました
26-->
27