試圖建立一個可點擊的索引與PHP/JavaScript顯示每個項目點擊數據

Question

我花了很多時間在網上尋求幫助，但我還沒有找到任何事情，我正在尋找並試圖拼湊來自多個來源的解決方案，基本上已經陷入死衚衕。

我想要做的是創建一個網頁，在頁面的一部分列出音樂家，以便我可以點擊單個音樂家的名字並加載他們的專輯，歌曲，歌詞等列表在同一頁的另一部分。數據全部在MySQL數據庫中，數據庫中的每個項目都有唯一的ID。

我可以將數據從數據庫中取出並存入數組中，如果手動設置ID，我可以在頁面的單獨部分創建音樂家列表以及他們的信息列表。如果我可以點擊返回ID，那麼我可以專注於嘗試使用Ajax來加載所需的數據，並且我猜JQuery將它顯示在頁面上我想要的位置上，但是我被困在獲取可點擊列表工作。

我使用Joomla 3.1創建網站，但代碼只是PHP和Javascript。

我最近的工作如下：

<ul id="nav" style="list-style:none"> 

<?php 
    foreach ($this->items as $item) { 
     echo '<li id='.$item->itemid.' onclick="$(this).index()" >'.$item->title.'</li>'; 
    } 
?> 
"</ul>" 

<script> 
    linkClicked = function (index) { 
     alert($('#nav li').get(index).id); 
    } 

如同我所有其他努力這創造了一個不錯的名單，但是當我點擊任何所列項目的什麼也沒有發生，我很清楚的方式偏離了軌道。我本打算這將顯示一個警報，顯示所選項目的ID，但不會顯示警報。我有一種感覺，這個解決方案非常簡單，但我只是沒有得到它，任何幫助都會非常感激地收到。

對於不熟悉Joomla的人來說，它提供了將MySQL數據加載到數組中的函數，使用數據庫中相關列的名稱訪問單個項目。所以$ item-> title給出當前數據行的'title'字段的值。

Answer 1

當文檔準備就緒時，您需要激發您的代碼。您的代碼不會被觸發。您需要點擊事件綁定到你的李標籤上的文件準備好，像這樣：

//on document ready 
$(function(){ 
    //select the li tags from #nav and bind a click event to them 
    $('#nav li').on('click', function(){ 
    //When li is clicked: alert the attribute "id" from the clicked element (this = li element) 
    alert($(this).attr('id')) 
    }) 
}); 

與代表團：也適用於那些動態添加到DOM（後頁面已經通過AJAX加載，例如元素調用）

$(function(){ 
    $('#nav').on('click', 'li', function(){ 
    alert($(this).attr('id')) 
    }) 
});