動態地分配唯一的ID值超鏈接onclick事件

我想迭代通過JSON響應對象來創建一個類別項目列表。我正在嘗試爲每個超鏈接分配唯一的類別ID值，以便當用戶單擊超鏈接時，它們將轉到第2頁，然後該頁面將根據所選的類別標識進行過濾。我被困在我的FOR LOOP中的邏輯錯誤，其中所有的類別ID都被分配給一個超鏈接。另外，是否有更好的方法在HTML頁面之間傳遞數據？動態地分配唯一的ID值超鏈接onclick事件

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

    } 



} 


    }); 
});

來源

2015-06-15 BlackBerry Special

你的小提琴顯示了多個創建的超鏈接，每個都有不同的CatID。似乎按預期工作是嗎？ – StaticVoid

你說得對。是否向網址添加了Catid參數是將網址值傳遞到下一頁的最佳方式？ –

是的，這是普遍接受的。有些會使用服務器端的Session變量，但對於大多數實現來說，這不是必需的，因爲它只是浪費資源。 – StaticVoid

這裏有幾個問題。

問題1：

你試圖追加鏈接裏面#courseLink，這也是一個鏈接（<a>標籤）。

問題2：

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

的單擊事件綁定在是發生在每次迭代，這意味着單詞「工作」將被追加爲有反覆在你形成多次。此外，由於id應該是唯一的，因此應將事件綁定到class選擇器而不是id（.courseLink而不是#courseLink）。

我modified your fiddle爲了每個點擊只附加單詞「工作」一次。

來源

2015-06-15 17:30:50 lucasnadalutti

動態地分配唯一的ID值超鏈接onclick事件

回答

相關問題