Динамически присваивать уникальное значение id гиперссылке onclick event

Question

Я пытаюсь выполнить итерацию через объект ответа JSON для создания списка элементов категории. Я пытаюсь назначить уникальное значение идентификатора категории для каждой гиперссылки, чтобы при нажатии пользователем гиперссылки они переходят на страницу 2, и страница будет фильтроваться на основе выбранного идентификатора категории. Я зациклился на логической ошибке в моем FOR LOOP, где всем идентификаторам категории присваивается одна гиперссылка. Кроме того, есть ли лучший способ передать данные между страницами HTML?

FIDDLE

$(document).ready(function() { 


    $.ajax({ 
url: "https://api.coursera.org/api/catalog.v1/categories", 
type: 'GET', 
dataType: "json", 
success: function(data) { 
    //alert(data.elements.length); 


     for(var i = 0; i < data.elements.length; i++) 
    {      
     $("#courseLink").append("<a href='page2.html?CatId="+data.elements[i].id+"'>"+data.elements[i].name+"</a><br/>"); 
     $("#courseLink").click(function() { 
      $("#test").append("work"); 
     }); 

    } 



} 


    }); 
}); 

Answer 1

Есть несколько проблем здесь.

Задача 1:

Вы пытались добавить ссылки внутри #courseLink, который также ссылка (<a> тег).

Задача 2:

$("#courseLink").click(function() { 
    $("#test").append("work"); 
}); 

событие щелчка связывание происходит в каждой итерации, что означает, что слово «работа» будет добавлен столько раз, сколько Есть итераций в вас форме. Кроме того, событие должно быть привязано к селектору class вместо id (вместо #courseLink), поскольку id s должен быть уникальным.

I modified your fiddle, чтобы добавить слово «работа» только один раз для каждого щелчка.