CODEWITHSUNDEEP
jqueryeventshtmlhyperlinkclick
Viktor
Viktor

Reputation: 633

href="#anchor" link does not work with clickable jQuery div outside

i do have big trouble with sth. i can't get. i do have

<div id="clickable">
  <a href="http://domain.de/link.html">link1</a>
  <a href="http://domain.de/link2.html">link2</a>
  <a href="http://domain.de/me.html#options">anchor link</a>
</div>

jQuery('#clickable').click(function () {
  window.location.href='http://domain.de/link.html';
});

link1 and link2 are working fine, but the anchor link calls the div click event

i have tried all the answers regarding bubbling the DOM here on stackoverflow neither event.stopPropagation(); return false; event.preventDefault(); are working

only with event.stopPropagation(); i do have the same effect as without anything as seen above

Upvotes: 0

Views: 2458

Answers (1)

LeGEC
LeGEC

Reputation: 51810

You need to prevent the click event to bubble to the parents of your <a> items. e.g. :

<div id="clickable">
  <a href="http://domain.de/link.html">link1</a>
  <a href="http://domain.de/link2.html">link2</a>
  <a href="http://domain.de/me.html#options">anchor link</a>
</div>

jQuery('#clickable a').click(function(event){
    event.stopPropagation();
});

jQuery('#clickable').click(function () {
  window.location.href='http://domain.de/link.html';
});

Upvotes: 1

Related Questions