Выбор списка в 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 на самом деле является текстом ссылки. Так что вам нужно это получить. это будет работать только для детей.

Я не уверен, что у LI есть событие click, но это сработало бы, если бы вы использовали функцию html () вместо text ():

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

Answer 2

Хотя ни один из других ответов неверен, я бы сделал это так:

$('#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 s напрямую, заключается в том, что вы хотите, чтобы все это было «кликабельным», используйте CSS для изменения размера ссылок:

#testnav a { display:block }

В зависимости от того, как вы это делаете, вам может понадобиться поэкспериментировать с созданием ссылки, li и / или ul float и установить ширину.

Answer 3

Вы были очень близки - вам нужно привязать событие к тегу привязки и убедиться, что вы связываете привязку события в функцию $(document).ready следующим образом:

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