配列に基づく動的リスナー

Question

私はjQueryを使ってモバイルアプリケーションを作成し、Slimを使用して作成したAPIを使用しています。

私の全体的な目標は、クリックすると適切なパラメータを持つ関数を呼び出すボタンのリストを作成することです。

ユーザーのリストを取得し、その結果をユーザーオブジェクトのグローバル配列に格納することで、スリム化に成功しました。

次は、htmlをドキュメントに追加して配列を反復して、ボタンを表示します。同時に私はクリックリスナーを追加しています。リスナーは追加されますが、期待通りのものではありません。

ユーザーは、グローバルスコープのユーザーオブジェクトの配列です。ユーザーオブジェクトは[{"name"： "User's name"}]まで煮詰めることができます。

また、私はコールバックでこれをやっているかもしれません。

$.getJSON(url, function(data){ 
    for(i=0;i<data.length;i++) 
    { 
     var u = new User(); 
     u.name = data[i]['name']; 
    } 
}) 
//The success handler DOES get called. 
.success(function() { 
    for(var i=0; i<users.length; i++) 
    { 
     //this part works. users[i] is accessed as expected. 
     var html_string = '<li>'+users[i].name+'</li>'; 

     $("#myUL").append(html_string); 
     $("#myUL li:last").click(function(){ 
      //logs undefined 
      console.log(users[i].name); 

      //Handle the event 
      eventHandleFunction() 
     }); 
    } 
}) 

私は私がやっていることは、ベストプラクティスにも該当しないことを知ることは、一般的にプログラミングに精通して十分だけど、私は私が修正する正しい方法を知らないというJavaScriptでとても文盲午前それ。ハウツーの回答に加えて、私は役に立つリソースに私を指差して時間を割いた人に本当に感謝しています。

更新：ハンドラを割り当てるために代理人を使用することについての回答を読んだ後、私は少しコードを更新しました。今、このように見えます。注：私は上記のコードを更新しておらず、元の質問の「なぜ」の部分に回答しています。あなたはいけないこの方法が明示的にあなたがしてjQueryのバージョン1.7以降を使用している場合は、動的にDOM

でliを追加し、すべてにイベントハンドラをクリックし添付する必要がありdelegate

$("#myUL").delegate("li:last","click",function(){ 

//event handler code here 
}); 

を使用することができます

$("#myUL").delegate("li","click",function(){ 
      //sets the attribute name of the global var user 
    user.name = $(this).text(); 
      //lets see what user.name is now. Oh, look. It's what i expect 
    alert(user.name); 
    //do whatever else i want to do here. 
}); 

//This json request is now (i believe) entirely unnecessary to answer the question. 
$.getJSON(url, function(data){ 
    for(i=0;i<data.length;i++) 
    { 
     var u = new User(); 
     u.name = data[i]['name']; 
    } 
}) 
//The success handler DOES get called. 
.success(function() { 
    //No longer relevant 
}) 

Answer 1

.onのような方法を使用できます

$("#myUL").on("click","li:last",function(){ 

//event handler code here 
}); 

私が見る3210

---

なぜ一部

理由は、スコープ

for(var i=0; i<users.length; i++) 
    {  

     var html_string = '<li>'+users[i].name+'</li>'; 

     $("#myUL").append(html_string); 

     $("#myUL li:last").click(function(){ 
      //logs undefined BECAUSE i is undefined inside the click handler 
      console.log(users[i].name); 
      //Handle the event 
      eventHandleFunction() 
     }); 
    } 

Answer 2

for(var i=0; i<users.length; i++) { 
    var numb = i, 
     html_string = '<li>'+users[numb].name+'</li>'; 

    $("#myUL").append(html_string); 

    $("#myUL li:last").click(function(){ 
     console.log(users[numb].name); 

     eventHandleFunction() 
    }); 
}