-1

行を動的に作成し、動的に追加された各行にクリックリスナーを追加するWebアプリを作成しています。しかし、行のインデックスを取得し、リスナーに変数を渡す方法を理解できませんでした。

for(var i=0; i<len; i++)  {      
    var TABLE = document.getElementById('tableId');
    var BODY = TABLE.getElementsByTagName('tbody')[0];

    //making a row
    var TR = document.createElement('tr');
    TR.className = "section group";

    //creating first column
    var TD = document.createElement('td');
    TD.className = "col span_1_of_3";

    //adding click listener
    url_array[count] = result.details[count].video_url;
    TR.addEventListener('click', function(e) {
        console.log(count,e);  //     ---------> 1 
    });

    count++;
}

示されている行では---> 1、グローバル変数カウントがゼロに初期化されており、その値は最後の行のインデックスです。

4

1 に答える 1

0

これはスコーピングの問題です。clickハンドラーが起動countすると、最後のハンドラーに設定されます。.addEventListenerメソッドを無名関数でラップしてみてください。

(function(count){
    TR.addEventListener('click', function(e) {
        console.log(count,e);  //     ---------> 1 
    });
})(count);

for関数はループとは異なり、個別のスコープを作成するため、これは機能します。

于 2013-01-02T09:32:40.950 に答える