jquery .click ancre href écrasante quand je ne le veux pas!

Question

J'ai un ensemble de DIVs imbriqués qui slidetoggle en utilisant jQuery comme l'utilisateur clique sur eux. A l'intérieur du DIV le plus interne, il y a une balise d'ancrage avec un HREF qui devrait naviguer quelque part. Le problème est que lorsque je clique sur le lien, il slidetoggles tout comme les DIVs parent au lieu de naviguer vers l'URL. Si je fais un clic droit sur l'ancre et que je sélectionne ouvrir dans un nouvel onglet, alors cela navigue bien. S'il vous plaît pouvez-vous repérer ce qui ne va pas? Merci

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

Answer 1

A peu de changements ici, il n'y a pas besoin de répéter le même sélecteur, et vérifiez que l'événement ne provient pas d'un tag <a>, comme ceci:

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

You can test it here. Si la cible de l'événement venait du <a> (il n'y en a pas d'enfants) alors nous sortons simplement du gestionnaire, en retournant undefined, puisque nous ne retournons pas explicitement false l'événement click fera l'affaire normale ... aller au href.

Answer 2

vous pouvez vérifier l'objet événement du clic et vérifiez la cible d'événement - voir aussi http://api.jquery.com/event.target/

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

(na pas tester, mais il devrait fonctionner)

Answer 3

Votre problème est return false; qui bloque le comportement par défaut.

$("a:eq(0)").click(function() { 
    return false; /* does nothing */ 
}); 
$("a:eq(1)").click(function() { 
    /* go to href */ 
}); 

• Example on jsFiddle

Answer 4

Je viens de tomber sur cette question aujourd'hui. J'ai trouvé un article très intéressant qui pourrait aider. Il décrit le mauvais (utilisation) des événements 'return false' et Jquery (http://fuelyourcoding.com/jquery-events-stop-misusing-return-false/). Je n'ai pas testé le code suivant sur votre exemple, mais je pense que cela devrait fonctionner.

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