javascript - 尝试使用 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

您需要在文档准备就绪时触发您的代码。您的代码未被触发。您需要将点击事件绑定(bind)到 document ready 上的 li 标签，如下所示:

//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'))
  })
});

委托(delegate):也适用于动态添加到 dom 的元素(在页面加载后，例如通过 ajax 调用)

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