Связывание внутри <li>детей не работает должным образом с JQuery

Question

У меня есть раскрывающееся меню с этим HTML:

<ul id="dropdownmenu" class="dropdown maintopmenu">

<li class="topmenu" link="link0.htm">SELL
    <ul>
        <li link="link1.htm"><span class="menulink">APPLY TO SELL</span>/li>
        <li link="link2.htm"><span class="menulink">FEE/FEATURES</span></li>
        <li link="link3"><span class="menulink">FAQ</span></li>
        <li link="mycart.php?4"><span class="menulink">IMAGE GUIDELINE</span></li>
    </ul>
</li>
</ul>

Тогда у меня есть эта функция jquery, которая должна перейти по ссылке на страницу = что угодно при нажатии. Что это делает, тем не менее, всегда идет к первой ссылке li (основной родитель). Я предполагаю, что он игнорирует весь блок внутри этого li.

$(function() {
    $('li[link]').click(function() {
    document.location.href=($(this).attr('link'));
});
});

Мне это нужно для работы со всеми уровнями подменю.

Answer 1

Возможно, потому что событие всплывает до предка <li> и запускает его обработчик.

Необходимо остановить распространение события, используя метод event.stopPropagation() ^{(документы)} или return false;.

$('li[link]').click(function( event ) {
    document.location.href = ($(this).attr('link'));
    event.stopPropagation();
});

Answer 2

Простой, положить возвращаемый false в конце функции.

$(function() {
    $('li[link]').click(function() {
        document.location.href=($(this).attr('link'));
        return false;
    });
});

Работает отлично!

Answer 3

Я бы посоветовал не использовать причудливые и недействительные атрибуты для вашего HTML и, если это неизбежно, использовать jQuery для создания традиционной разметки, например:

$('li').each(
    function(){
        var linkTo = $(this).attr('link');
        $(this).find('span').wrap('<a href="' + linkTo + '"></a>');
    });

JS Fiddledemo .

Но я настоятельно рекомендую использовать элемент a вместо малярии JavaScript, тем более что JS / jQuery плохо работает в отсутствие JS.

Answer 4

$(function() {
          $('li').click(function(e) {
          var $var = $(this).attr("link");
              alert($var);
              e.stopPropagation();
          //document.location.href=($(this).attr('link'));
         } );
    });

использовать e.stopPropagation ();

надеюсь, это поможет