Javascriptが動的に、私は次のことを行う必要がある要素とonclickの機能

Question

を作成します。

• まず、サーバー上のデータpathsをフェッチします。データにはpathの配列が含まれており、長さは不明です。

• は、それから私は、各list-group-itemがpathの略list-groupを作成します。

• 最後に、データアレイ内correponding pathを表示list-group-itemの各々のclick機能を設定します。

がここに関係なく、私がクリックしたlist-group-item、しかしコード

var i = 0; 
for(path of paths) { 
    i++; 
    $("#list_path").append('<a id="list-path-' + i + '" class="list-group-item tooltip-button"">' + "Path " + i + '</a>'); 
    $("#list-path-" + i).click(function() { console.log(path) }) 
} 

ません、唯一の最後のpath要素が示されています。私は問題は、pathのポインタだけがforループの最後に、最後のpathを指し示すクリック機能に割り当てられていることだと思います。

pathを表示するようにクリック機能を設定するにはどうすればよいですか？

ありがとうございました。

Answer 1

あなたは `あなたがキャプチャ` $（ "＃リスト-path-" + I）.click（関数（）{はconsole.log（パス）}）でパスをputingすることにより閉鎖

var i = 0; 
for(path of paths) { 
    i++; 
    $("#list_path").append('<a id="list-path-' + i + '" class="list-group-item tooltip-button"">' + "Path " + i + '</a>'); 
    $("#list-path-" + i).click((function(path) { 
     // return function wich has own variable path 
     return function() { console.log(path) }; 
    })(path)) 
} 

Answer 2

あなたはそのための閉鎖のこの

$("#list-path-" + i).click(function() { console.log($(this).text()); }) 

を行う必要があり、パスは、forループの最後の値があります。