Don't trigger the parent event when clicking on the child element

Question

See my snippet, as I click the parent element, the child element is shown but as I click the child element, the parent element events seems also triggered along with the child elements event, any ideas to trigger only parent elements event when on click and only child elements event when on click (must not bubble the parent elements event)? any ideas, help, clues, suggestions, recommendations please?

$(document).ready(function(){
  $("#child").hide();
  $("#parent").click(function(){
    alert("parent event is triggered");
    $("#child").show();
  });
  $("#child").click(function(){
    alert("child event is triggered");
  });
});

#parent{
 padding: 15px;
 border: 3px dotted #cccccc;
}
#child{
 padding: 4px;
 border: 1px solid blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="parent">
  This is parent element, click to show the child element
  <div id="child">Child</div>
</div>

use prevent default inside child click – Rajesh Feb 01 '16 at 10:52 — Rajesh, Feb 01 '16 at 10:52

score 2 · Answer 1 · answered Feb 01 '16 at 10:53

2

$("#child").click(function(){
    alert("child event is triggered");
    event.stopPropagation();
  });

answered Feb 01 '16 at 10:53

Avinash

812
8
17

score 0 · Answer 2 · edited Feb 01 '16 at 11:10

0

Have you tried adding a stopPropogation

$("#child").click(function(event){
    alert("child event is triggered");
    event.stopPropagation();
});

Reference

edited Feb 01 '16 at 11:10

Rino Raj

6,264
2
27
42

answered Feb 01 '16 at 10:54

Obsidian

515
3
10

Don't trigger the parent event when clicking on the child element

2 Answers2