動的に追加した記述で1回しか呼んでいないconsole.logが複数回呼ばれます

Question

node.js勉強中です。

サーバーからの通信によってクライアント側に動的にHTMLを記述するのですが、想定では1回しか呼ばれないconsole.logが複数回呼ばれているようです。chromeのデベロッパーツールにてコメントの左に数字が付きます。

socket.on('message', function(id,grade,set,number,name,name2,sex,el1,el2,el3,num) {
	  $('#tb').prepend($('<tr id="bar"></tr>'));
	  $('#bar').append($('<td><button type="button" class="btn btn-light btn-x" id="btn' + num + '">ボタン</button>'));
	  ++Num;
	  $('#bar').append($('<td>').text(grade));
	  $('#bar').append($('<td>').text(set));
	  $('#bar').append($('<td>').text(number));
	  $('#bar').append($('<th>').text(name));
	  $('#bar').append($('<th>').text(name2));
	  $('#bar').append($('<td>').text(sex));
	  $('#bar').append($('<td><button type="button" class="btn btn-info btn-x">ボタンその２</button>'));
	  $('#bar').append($('<td>').text(""));
	  $('#bar').append($('<td class="id" style="display:block;">').text(id));

	  $("[id^=btn]").on("click",function(){
		console.log(1, "テストです")
	  });
    });

サーバーからは30~40個程度の回数通信がきて、縦方向に「ボタン」が動的に追加されます。送られてくるnumは一つずつ加算されて送られてきますのでボタンのidは上からbtn40,39,38,と名付けられています。

一番上のボタンを押すと「テストです」は1回、2個目をクリックすると2回、40個目をクリックすると40回呼ばれているようです。クリックした要素のidをattrで拾って確認しましたが、きちんと押している要素は捕捉している様子。

これはいったいなにが原因なのでしょうか。

Answer 1

通信の内容がわからないので外しているかもしれませんが、

      $("[id^=btn]").on("click",function(){
        console.log(1, "テストです")
      });

の最初のセレクタ $("[id^=btn]") は、idがbtnから始まるもの全てにマッチします。
参考：http://semooh.jp/jquery/api/selectors/%5Battribute+start+value%5D/

ということは、
メッセージ一回目
ボタン1個めが追加される(id=btn1)。 追加したボタンにclickイベントハンドラが追加される
↓
メッセージ二回目
ボタン二個めが追加される（id=btn2）。id=btn1 と id=btn2 のボタンにイベントハンドラが追加される
（＝この時点で、id=btn1のボタンは、clickハンドラが二重になっている）

ということではないでしょうか。

$("[id=btn" + num + "]").on('click') 〜 のように追加したものだけにイベントハンドラを追加するようにすればなおると思います。

Comments

[Izumo1101]

なるほど！拾ってきたIDが正しいからと思っていたら、それは最後に取ってきたIDだったわけですね。納得です。
ありがとうございます！