onclickに値を渡す

Question

for (i= 1; i < 100; i++) { 
    var my_element = document.createElement ("td"); 
    row.appendChild (my_element); 
    my_element.onclick = function() {my_function (i)); 
} 

のようにループを使ってたくさんのHTML要素を作成すると、要素がクリックされたとき、my_functionに渡されたiの値は何の要素を呼び出すかにかかわらず常に100です。私はこれを回避するために、

my_element.id = "something"+i; 
my_element.onclick = function (e) {my_function (e.target.id)}; 

（Internet Explorerの場合、targetはsrcElementである必要があります）を使用して作業しました。IDを追加しなくても関数を作成する方法があるかどうか不思議ですこのような要素。

Answer 1

ループの各反復でiの値が変化します。 You need a closure to capture the value of i：

(function(i) { 
    my_element.onclick = function() {my_function (i)}; 
}(i)) 

Answer 2

私があなただったら、私はあなたのクリックでやったとき、あなたはそれをretriveできるように、例えばMYIDなどの属性を追加する必要があり、各要素にjQueryの（またはプロトタイプまたは任意のJSフレームワーク利用可能）

を使用します。

for(i=1; i ++ ; i<100){ 
    var myelement = "<td myid='something"+i+"' class='myTD'></td>" ; 
    row.append(myelement); 
} 

.... 

$(document).ready(function(){ 
    $('.myTD').click(function(){ 
    var id = $(this).attr('myid'); 
    my_function(id); 
    }); 

}); 

私は私のウェブアプリ:)にこのトリックをした

Answer 3

あなたはあなたのハンドラ関数を構築する機能を記述する場合、あなたはそれはあなたが欲しい数を得ることを保証するためにあなたを与える新しいスコープを使用することができます。例：

function BuildHandler (i) { return function() { alert(i); }; 

for (i= 1; i < 100; i++) { 
    var my_element = document.createElement ("td"); 
    row.appendChild (my_element); 
    my_element.onclick = BuildHandler(i); 
}