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

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

li 的文字实际上是一个A 链接文字。所以你需要得到它。这只适用于孩子们。

我不确定 LI 是否有点击事件，但如果您使用 html() 函数而不是 text()，它会起作用：

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

Answer 2

您非常接近 - 您需要将事件绑定到锚标记并确保将事件绑定包装在 $(document).ready 函数中，如下所示：

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

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();
});

如果您尝试直接附加到 lis 的原因是您希望整个内容“可点击”，请使用 CSS 调整链接大小：

#testnav a { display:block }

根据您的操作方式，您可能需要尝试使链接、li 和/或 ul 浮动，并设置宽度。