Используйте Javascript onClick Event, чтобы перейти к href дочернего элемента

Question

Из-за некоторой странности я застрял с использованием javascript для Jquery, чтобы получить ссылку для работы, щелкнув родительский элемент li. Если щелкнуть в любом месте на li, пользователь должен перейти по ссылке a, которая является его прямым потомком. То, что у меня далеко, похоже, не работает. Код:

<ul>
<li onclick="location.href='$(this).children('a:first').attr('href')';">
    <a href="http://example.com/">link</a>
    </li>
    </ul> 

Спасибо!

Answer 1

Когда вы ставите одинарные кавычки вокруг href, он рассматривается как строка. Кроме того, вы использовали одинарные кавычки в других одинарных кавычках, что преждевременно заканчивает строку. Он буквально пытается перейти к URL "$(this).children(".

Вместо этого удалите одинарные кавычки вокруг location.href

<ul>
    <li onclick="location.href=$(this).children('a:first').attr('href');">
        <a href="http://example.com/">link</a>
    </li>
</ul> 

Кроме того, вы действительно не должны использовать встроенные скрипты, как это. Гораздо лучше добавить тег сценария внизу страницы и поместить туда сценарий, который привязывает событие click к li.

Answer 2

Вы могли бы упростить свой код, переместившись не с помощью onclick, а с помощью селектора для нацеливания на этот узел и создания там события click.

$(".myUl li").on("click", function() {
    location.href = $(this).children("a").attr("href");
});

Но вы действительно должны решить эту проблему с помощью CSS. Ты можешь использовать display: block; на <a> Кроме того, они должны заполнять содержимое, добавлять дополнительные отступы и в основном вести себя как div, но сохраняют возможность связывания.

Answer 3

Заменить этим

    <li onclick="location.href=$(this).children('a:first').attr('href');">