jQuery中的列表选择

Question

我正在使用jQuery，我的列表包含以下内容。

<div id="wrapper"> 
    <ul id="testnav"> 
     <li class="test1"><a href="/link">Heading</a> 
      <ul> 
       <li><a href="/link">Sub Heading</a></li> 
       <li><a href="/link">Sub Heading</a></li> 
       <li><a href="/link">Sub Heading</a></li> 
      </ul> 
     </li> 
     <li class="test2"><a href="/link">Heading</a> 
      <ul> 
       <li><a href="/link">Sub Heading</a></li> 
       <li><a href="/link">Sub Heading</a></li> 
       <li><a href="/link">Sub Heading</a></li> 
      </ul> 
     </li> 
     <li class="test3"><a href="/link">Heading</a> 
      <ul> 
       <li><a href="/link">Sub Heading</a></li> 
       <li><a href="/link">Sub Heading</a></li> 
       <li><a href="/link">Sub Heading</a></li> 
      </ul> 
     </li> 
    </ul> 
</div> 

当我点击标题或子标题时，我需要相应的文字。我用了以下，但它不起作用。

$("li").bind("click", function(){ 
    alert($(this).text()); 
}); 

我应该做什么改变？

Answer 1

你非常接近 - 你需要事件绑定到锚标记，并确保你包在$(document).ready功能的事件绑定像这样：

$(document).ready(function() { 
    $("li a").bind("click", function() { alert($(this).text()); }) 
}); 

Answer 2

$("li a").bind("click", function(){ 
    alert($(this).text()); 
}); 

li的文本实际上是一个链接文本。所以你需要明白这一点。那只会对孩子有用。

我不知道LIS有一个点击事件，但（）它会工作，如果你想使用HTML功能，而不是文本（）的：

$("li").bind("click", function(){ 
    alert($(this).html()); 
}); 

Answer 3

虽然没有其他的答案是不正确的，我不喜欢这样写道：

$('#testnav a').click(function(ev){ 
    alert($(this).text()) 

    //if you need to stop the browser going to the link 
    // (eg you're doing something else AJAXey): 
    ev.preventDefault(); 
    ev.stopPropagation(); 
}); 

如果你试图连接到li真正的原因是直接你想整个事情是“点击”，使用CSS来调整你的链接：

#testnav a { display:block } 

取决于你如何做它，你可能需要玩弄链接，li和/或ul浮动，并设置宽度。