jqueryを使用して動的に作成されるボタンにクラスまたはIDを割り当てる

Question

私はいくつかのボタンを動的に作成しています。別のクラスまたはIDでそれぞれを割り当てようとしているので、クリックすると別の出力が表示されます。各ボタンに固有のクラスまたはID名を与えるために、各クラスまたはID名の最後にどのように値を追加しますか？ここ は私のコード

socket.on('usernames', function(data){ 
    var $contentWrap = $("#contentWrap").empty(); 
    for(i=0; i <data.length; i++){ 
     $input = $('<input type="button" style="width:200px" class= "button"/></br>'); 
     $input.val(data[i]); 
     $input.appendTo($("#contentWrap")); 
    } 
}); 

は私が作成したすべてのボタンのクリックイベントに作成できることです。これまでのところ、クリックして偶数を作成しましたが、最初のボタンでのみ機能します。ここ は私のコード

$(document.body).on('click','.button', function(e) { 
    console.log($('.button').val()); 
}); 

Answer 1

利用$(this).val()の代わり$('.button').val()です。 thisはクリックされたボタンを参照します。

$(document.body).on('click','.button', function(e) { 
    console.log($(this).val()); 
}); 

Answer 2

socket.on('usernames', function(data){ 
 
    var $contentWrap = $("#contentWrap").empty(); 
 
    for(i=0; i <data.length; i++){ 
 
     $input = $('<input type="button" id="btn"'+i+' style="width:200px" class= "button"/></br>'); 
 
     $input.val(data[i]); 
 
     $input.appendTo($("#contentWrap")); 
 
    } 
 
});

Answer 3

問題：コードconsole.log($('.button').val());のこの部分で一部$('.button')は、すべてのボタンを選択し、しかし、あなたは、コレクションのうち最初の1に.val()それのデフォルトを言うときです。したがって、すべてのボタンクリックで同じ出力が表示されます。

解決策：$(this).val()を使用して現在のクリックされたボタンの値を記録するようにコードを変更します。 thisは、イベントをトリガした要素を参照します。

ように、コードの最後の行は、コンソールは、すべてのボタンクリックイベントに同じ値を記録してい

console.log($(this).val());