如何在Jquery中选择ID？

Question

我有一个无序的名单；

<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，而且我目前正在使用下面的代码，该代码提供了第一个list元素的ID。

$(document).ready(function(){

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

   alert(name);
  });

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

Answer 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。

Answer 2

试试这个：

$(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>

Answer 3

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

$('#names').on('click', function(){ 
...