Is there any way to make these link inside another link work

Question

I have the following markup:

<a class="list-group-item hola" id="competition-card-<%= competition.id %>" href="a_url_to_a_site">
    <div class='row'>
          <div class='col-xs-11'>
            Some text
          </div>

        <div class='col-xs-1 shows-submenu'>
           Some text
        </div>
    </div>
</a>

I'm trying to achieve:

If user clicks the 'a' tag he is directed to a site, except when...
user clicks the '.shows-submenu' div a hidden div is displayed.

My jQuery is as follows:

$('body').on('click', '.shows-submenu', function(e) {
   event.stopImmediatePropagation();
  if ($(this).closest('a.list-group-item').next('.hidden-group-item').hasClass('hide')) {
     $('.hidden-group-item').addClass('hide');
     $(this).closest('a.list-group-item').next('.hidden-group-item').toggleClass('hide');
  }
  else {
     $(this).closest('a.list-group-item').next('.hidden-group-item').toggleClass('hide');
  }
});

Currently, if I click '.shows-submenu' div the 'a' tag is still called and I'm directed to the site. As I'm using bootcards plugin I can't change the 'a' tag to a div, for example.

Is there any way to stop 'a' only when clicking the '.shows-submenu' div. I've tried using stopPropagation in both 'a' and the 'div' without success.

Why would you use this markup structure in the first place? Using semantic markup would make more sense — charlietfl, Apr 02 '17 at 00:42

score 2 · Answer 1 · edited May 23 '17 at 12:32

What you are looking for is event.stopPropagation() that will prevent bubbling and event.preventDefault that will avoid the default behavior for links onClick.

Fortunately, in jQuery returning false inside the click handler function will fire both. More on the subject here: https://stackoverflow.com/a/1357151/670377

So you just need to modify your function as:

$('document').on('click', '.shows-submenu', function(e) {
  if ($(this).closest('a.list-group-item').next('.hidden-group-item').hasClass('hide')) {
     $('.hidden-group-item').addClass('hide');
     $(this).closest('a.list-group-item').next('.hidden-group-item').toggleClass('hide');
  }
  else {
     $(this).closest('a.list-group-item').next('.hidden-group-item').toggleClass('hide');
  }
  // This will be equivalent to 
  // e.preventDefault; e.stopPropagation;
  return false;
});

event.stopImmediatePropagation has another purpose than just stopping the default functionality, it will also prevent all the remaining listeners of the element from being called.

first statement is not true, a quick google search will prove it false — charlietfl, Apr 02 '17 at 00:45
oh, you are right @charlietfl! edited. I have to stop assuming things :/ — Tomas Ramirez Sarduy, Apr 02 '17 at 00:58
@TomSarduy thanks for your answer Tom it works well. I'm accepting Billy's answer as he answered before but giving you points for your help! — alopez02, Apr 02 '17 at 01:16

But those new buttons though.. · Accepted Answer · 2017-04-02T00:56:08.527

I think what you want is event.preventDefault(). Both event.stopPropagation() and event.stopImmediatePropagation() will affect other event handlers but not the default behavior of an anchor. Also you should declare the argument as event if that's how you're referring to it inside the function:

$('.show-submenu').on('click', function(event) {
  event.preventDefault();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="http://example.com">this follows link
    <div class="show-submenu">this does not</div>
</a>

Is there any way to make these link inside another link work

2 Answers2