Передача нескольких значений результата ajax функции, вызванной обработчиком события

Question

Я пишу пользовательский код javascript (а не jQuery), чтобы обрабатывать ответ запроса ajax для соответствия имени имени для имен баз данных (предложения имен). Я не хочу использовать готовый плагин для такого рода работ, поскольку я хочу быть гибким для будущих модификаций.

Аякса ответ имеет следующий вид (JSON массив)

[{"ID":"ID1","name":"name1"},{"ID":"ID2","name":"name2"}] 

я покажу вам следующий пример кода, чтобы проиллюстрировать мою текущую задачу:

var response = xmlhttp.responseText; 
var result = JSON.parse(response); 
var number = result.length; 
//box for namesuggestions 
var root = document.getElementById('namebox'); 
var list = document.createElement("ul"); 
for (var i=0;i<number;i++) { 
      var element = document.createElement('li'); 
      element.onclick=function() {fillName(this.childNodes[0].nodeValue,this.childNodes[1].value);}; 
      //hidden input field for storage of ID 
      var eInput = document.createElement('input'); 
      eInput.type = 'hidden'; 
      eInput.value = result[i].ID; 
      //text field for storage of name 
      var textElement = document.createTextNode(result[i].name); 
      element.appendChild(textElement); 
      element.appendChild(eInput); 
      list.appendChild(element);    
} 
root.appendChild(list); 

Мой корневой элемент является namebox, где Я показываю найденный список предложений имени внутри нового созданного элемента «ul». Элементы списка создаются в цикле for. Функция fillName заполнит выбранное имя соответствующими метками input, которые были использованы для поиска ajax. Моя проблема заключается в переносе выбранных ID и name на функцию fillName в простой форме. Как видите, на данный момент я использую скрытое поле для хранилища идентификаторов. Чтобы получить доступ к name, я использую this.childNodes[0].nodeValue и до IDthis.childNodes[1].value.

Знаете ли вы, что лучший способ передачи нескольких значений в функции, называемые обработчиками событий, возможно, без использования скрытых полей или других элементов html? По какой-то причине я не понимаю, element.onclick=function() {fillAuthor(result[i].name,result[i].ID);}; не работает.

Заранее за вашу помощь.

Answer 1

Использование таких значений не будет работать, потому что к моменту вызова обработчика события клика цикл for завершен и i = 2, и результата нет [2].

Попробуйте сделать это так: http://jsfiddle.net/m8hwg/

var response = '[{"ID":"ID1","name":"name1"},{"ID":"ID2","name":"name2"}]'; 
var result = JSON.parse(response); 
var number = result.length; 
//box for namesuggestions 
var root = document.getElementById('namebox'); 
var list = document.createElement("ul"); 
for (var i=0;i<number;i++) { 
      var element = document.createElement('li'); 
      element.onclick=function(res) { 
       return function() { 
        console.log(res.name + ', ' + res.ID); 
       } 
      }(result[i]); 
      //text field for storage of name 
      var textElement = document.createTextNode(result[i].name); 
      element.appendChild(textElement); 
      list.appendChild(element);    
} 
root.appendChild(list); 

Я переключился fillAuthor для console.log, как я не знаю, что fillAuthor будет делать.