试图建立一个可点击的索引与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')) 
    }) 
});