Jquery Parent Class event triggers when child items clicked

Question

Hi I have child ul and parent li which is being targeted by jquery which toggles class "shown" on click event within it. The problem I face is that for some reason when I click child ul li elements it also triggers that event. How to prevent that?

Here is my code.

<script>
    $(document).ready(function() {
        $('.dropdown').click(function(e) {
            e.stopPropagation();
            $(this).toggleClass('shown');
            e.preventDefault();
        })
    })
</script>


<li class="dropdown"><a title="Installation" href="#">Installation <span class="caret"></span></a>
    <ul role="menu" class="dropdown-menu">
        <li>
            <a title="Wood Floor Installation" href="">Wood Floor Installation</a></li>
        <li>
            <a title="Sub Floor Preparation" href="">Sub Floor Preparation</a></li>
        <li>
            <a title="Type of your subfloor" href="">Type of your subfloor</a></li>
        <li>
            <a title="Wood Floor Fitting Method" href="">Wood Floor Fitting Method</a>
        </li>
    </ul>
</li>

possible duplicate of [jquery stop child triggering parent event](http://stackoverflow.com/questions/2364629/jquery-stop-child-triggering-parent-event) — Rizky Fakkel, Apr 16 '15 at 12:28
If you're clicking the anchor, why not just target the anchor instead ? — adeneo, Apr 16 '15 at 12:28
you can see the issue I am facing https://www.3oak.co.uk/customer-guide/ on installation item try to go into any of the child elements — Andrius Solopovas, Apr 16 '15 at 13:04
The code from both Erwin and myself should do that. The link you've posted doesn't help, since none of your question code appears to be hooked up there. — John Green, Apr 16 '15 at 13:08

score 7 · Accepted Answer · answered Apr 16 '15 at 12:27

7

You're specifying that you want everything in dropdown to trigger the event. If you only want the top level A, it looks more like this:

jQuery(document).ready(function($) {
   $('.dropdown>a').click(function(e) {
     $(this).parent().toggleClass('shown');
     e.preventDefault();
   })
})

answered Apr 16 '15 at 12:27

John Green

13,241
3
29
51

Frankly, I have no idea what you're asking. Which element is supposed to get its class toggled? – John Green Apr 16 '15 at 13:02
Yes. The target is .dropdown, subsetted by direct children of .dropdown. (which, in the example you provided has no further children). It then traverses up the DOM tree to its parent, and toggles a class there. It will not ever select child>ul>li>a Unless the child LI also contains the class 'dropdown'. – John Green Apr 16 '15 at 13:11
Yes, which is exactly the code I've provided. I expect that you've not implemented it correctly, and can't tell me what is borked. In fact, the only solution that is really close to what you want is mine. StopPropagation and preventDefault are fine, aren't going to do much for you here... the issue is an addressing one. – John Green Apr 16 '15 at 13:34
Sorry man I am just being stupid here it all works. Thank you very much. – Andrius Solopovas Apr 16 '15 at 13:59

score 2 · Answer 2 · answered Apr 16 '15 at 12:28

2

Use e.stopPropagation() where you dont want the click to bubble

answered Apr 16 '15 at 12:28

Kushal

1,360
6
16

Erwin · Answer 3 · 2015-04-16T13:13:08.180

2

What you're experiencing is called event bubbling. Events triggered on elements deeper in the hierarchy will "bubble" up towards the root of the DOM tree, hence the parent <li> element receives click events instantiated by the child elements.

The easiest way to fix this is to check which element triggered the original event by checking event.target:

<script>
  jQuery(document).ready(function($) {
     $('.dropdown').click(function(e) {
       if (!$(e.target).is('.dropdown-toggle'))
        return;

       $(this).toggleClass('shown');
       e.preventDefault();
     })
  })
</script>


<li class="dropdown"><a title="Installation" href="#" data-toggle="dropdown" class="dropdown-toggle">Installation <span class="caret"></span></a>
  <ul role="menu" class=" dropdown-menu">
      <li>
          <a title="Wood Floor Installation" href="">Wood Floor Installation</a></li>
      <li>
          <a title="Sub Floor Preparation" href="">Sub Floor Preparation</a></li>
      <li>
          <a title="Type of your subfloor" href="">Type of your subfloor</a></li>
      <li>
          <a title="Wood Floor Fitting Method" href="">Wood Floor Fitting Method</a>
      </li>
  </ul>
</li>

edited Apr 16 '15 at 13:13

answered Apr 16 '15 at 12:29

Erwin

178
7

I love your writeup, but you keep editing your code with stuff that won't work (you're returning on the one condition where you actually want the program flow to continue). – John Green Apr 16 '15 at 12:38
Yes, I changed it because initially I thought the event shouldn't trigger on child events at all but then I noticed the poster probably wanted the event to still trigger on the `
` element. The current version works because child the child `
` element has a different class from the parent element
– Erwin Apr 16 '15 at 12:57
@Erwin I apologize, I misread where .dropdown-menu was (I hadn't bothered to scroll right). Yes, your code basically works to solve the problem as I understood it -- but I think the op wasn't clear in wtf he's trying to do. – John Green Apr 16 '15 at 13:05
Ah I just noticed this still doesn't work since it will only filter out the `
– Erwin Apr 16 '15 at 13:12

score 1 · Answer 4 · answered Apr 16 '15 at 12:28

1

Try stopImmediatePropagation() like this:

$(document).on('click', '#child_element', function(event) {
   event.stopImmediatePropagation();
})

answered Apr 16 '15 at 12:28

kapantzak

11,610
4
39
61

score -1 · Answer 5 · answered Apr 16 '15 at 13:02

-1

You can use target property. just use this code in child element. target="_parent"

Thanks, Hayat S.

answered Apr 16 '15 at 13:02

Hayat Sama

287
2
10

Jquery Parent Class event triggers when child items clicked

5 Answers5