2016-09-22 13 views
0

私はいくつかのボタンを動的に作成しています。別のクラスまたはIDでそれぞれを割り当てようとしているので、クリックすると別の出力が表示されます。各ボタンに固有のクラスまたはID名を与えるために、各クラスまたはID名の最後にどのように値を追加しますか?ここ は私のコードjqueryを使用して動的に作成されるボタンにクラスまたは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()); 
}); 
+0

でなければならないか、 –

答えて

1

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

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

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")); 
 
    } 
 
});

+0

をクリックして、電子を使用するコンソールログは最初のボタンの上に起こると言います。 whichが呼び出されているかどうかを調べるtarget.id – jsquerylover

0

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

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

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

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

関連する問題