Вопрос по toggle, jquery, html, anchor, click – JQuery. Нажмите на якорь, когда я не хочу!

0

У меня есть набор вложенных DIV, которые переключаются с помощью jQuery, когда пользователь нажимает на них. Внутри самого внутреннего DIV есть тег привязки с HREF, который должен где-то перемещаться. Проблема в том, что когда я нажимаю на ссылку, она перемещается так же, как родительские DIV, вместо перехода по URL. Если я щелкну правой кнопкой мыши на якорь и выберу открыть в новой вкладке, то это хорошо перемещается. Пожалуйста, вы можете определить, что идет не так? Спасибо

  <div class="pod"> 
    <li id='ThirdParty'> 
        <div class='block'> 
            <h1>ThirdParty</h1>
            <div class='systemHeader'> 
                <h2><span>Bobs shop</span></h2> 
                <div class='subSystems'>                     
                    <div class='subSystemHeader'> 
                        <h3><span>&nbsp;Gifts</span></h3> 
                        <div class='reports '> 
                            <p class='reports i1'> 
                                <a href='/Next.Whs.Web.MenuSystem/Default.aspx?id=470' title=''>Option 1</a></p> 
                        </div> 
                    </div> 
                </div> 
            </div> 
        </div> 
    </li> 
</div>

    $("div.subSystemHeader, div.subSystemHeader").click(function() { 
   $("> div", this).slideToggle(...); 
   return false; 
}); 

Ваш Ответ

4   ответа
2

Несколько изменений здесь, нет необходимости повторять тот же селектор и проверять, что событие не пришло от<a> тег, как это:

$("div.subSystemHeader").click(function(e) { 
  if(e.target.nodeName == 'A') return; //skip this handler, don't return false
  $("> div", this).slideToggle(...); 
  return false; 
});

Вы можете проверить это здесь, Если цель события была от<a> (его потомков нет), тогда мы просто выходим из обработчика, возвращаяundefined, поскольку мы не возвращаем явноfalse click событие будет делать это нормально ... собирается наhref.

0

Ваша проблемаreturn false; который блокирует поведение по умолчанию.

$("a:eq(0)").click(function() {
    return false; /* does nothing */
});
$("a:eq(1)").click(function() {
    /* go to href */
});
Пример на jsFiddle
2

Вы можете проверить объект события клика, а затем проверить цель события - см. такжеhttp://api.jquery.com/event.target/

 $("div.subSystemHeader, div.subSystemHeader").click(function(event) { 
   if(event.target.nodeName.toLowerCase() == 'a') return;
 ...
 }

(не проверял, но это должно работать)

Это не будет работать, строки чувствительны к регистру иnodeName в верхнем регистре. Nick Craver
0

ную статью, которая может помочь. Описывает неправильное использование (использование) событий return false и Jquery (http://fuelyourcoding.com/jquery-events-stop-misusing-return-false/). Я не тестировал следующий код на вашем примере, но думаю, что это должно сработать.

$('.subSystemHeader a').click(function(e){
    e.stopPropagation(); 
});

Похожие вопросы