0

我有无序列表；

<ul id="names">
  <li id="john"><div>data from database</div></li>
  <li id="peter"><div>data from database</div></li>
  <li id="mathhewm"><div>data from database</div></li>
  <li id="philip"><div>data from database</div></li>
  <li id="tarheoweh"><div>data from database</div></li>
</ul>

上面的列表是使用 ajax 和 jquery 动态生成的，执行起来没有问题。问题是，每当用户单击其中任何一个时，我都想获取列表的 ID，而我目前正在使用下面的代码，该代码为我提供了第一个列表元素的 ID。

$(document).ready(function(){

   $('#names').click(function(){
   var name=$('#names li').attr('id');

   alert(name);
  });

上面的代码执行得很好，但不是我想要的输出。我需要任何帮助、建议或批评。谢谢，我很感激。

4

4 回答 4

4

尝试这个：

$(document).ready(function(){

   $('#names li').click(function(){
      var name = this.id;

      alert(name); 
   });
});

但您应该创建有效的 HTML！li嵌套li无效

也许这更好：

<ul id="names">
  <li id="john"><div>data from database</div></li>
  <li id="peter"><div>data from database</div></li>
  <li id="mathhewm"><div>data from database</div></li>
  <li id="philip"><div>data from database</div></li>
  <li id="tarheoweh"><div>data from database</div></li>
</ul>
于 2013-08-22T07:55:47.267 回答
1

尝试这个

$(document).ready(function(){
   $('#names').click(function(){
       $('#names li').each(function(){
           alert($(this).attr('id'));
       });
  });
});

演示

于 2013-08-22T08:04:08.427 回答
1

HTML：

<ul class="my-items" id="names">
  <li id="john"><div>data from database</div></li>
  <li id="peter"><div>data from database</div></li>
  <li id="mathhewm"><div>data from database</div></li>
  <li id="philip"><div>data from database</div></li>
  <li id="tarheoweh"><div>data from database</div></li>
</ul>

jQuery 委托附加一个侦听器，该侦听器捕获对li以下元素的所有点击id="names"

jQuery(function() {
   jQuery(document).on('click', '#names li', function(e) {
      var clickedLi = e.currentTarget.id;
   });
})

这是一个带有工作示例的jsFiddle 。

于 2013-08-22T08:02:30.537 回答
1

那个html不正确，你可以把ul放在li下面，但不能把li放在li下面。除此之外，如果 ul 列表是动态生成的，则不能使用 click 事件。请尝试“on”事件。

$('#names').on('click', function(){ 
...
于 2013-08-22T07:56:14.750 回答