Динамические слушатели на основе массива

Question

Я играю с созданием мобильных приложений с помощью jQuery и api, который я создал с помощью Slim.

Моя общая цель - создать список кнопок, которые при нажатии будут вызывать функцию с соответствующими параметрами.

Я успешно отправляю свой запрос в slim, получая список пользователей и сохраняя результаты в глобальном массиве объектов User.

Далее я повторяю массив, добавляющий html к документу, чтобы показать кнопки. В то же время я добавляю прослушиватель кликов. Слушатель добавляется, но не так, как я ожидаю.

Пользователи представляют собой массив объектов пользователя с глобальной областью. Пользовательский объект можно свернуть до [{"name": "User 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, что я не знаю, как правильно исправить Это. В дополнение к тому, как я отвечаю, я бы очень признателен всем, кто потратил некоторое время, чтобы указать мне на полезные ресурсы.

Обновление: после прочтения ответа об использовании делегата для назначения обработчиков я немного обновил свой код. Теперь это выглядит так. Примечание. Я только не обновил код выше, чтобы получить ответ на «почему» часть исходного вопроса.

$("#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

вы можете использовать delegate

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

//event handler code here 
}); 

Таким образом, вы не должны явным образом прикрепить нажмите обработчик события к каждому динамически добавляется li в DOM

если вы используете JQuery версии 1.7+, то вы можете использовать метод .on как

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

//event handler code here 
}); 

---

почему часть

причина я вижу является областью

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