Don't trigger the parent event when clicking on the child element : <p>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?</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function(){
  $("#child").hide();
  $("#parent").click(function(){
    alert("parent event is triggered");
    $("#child").show();
  });
  $("#child").click(function(){
    alert("child event is triggered");
  });
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>#parent{
 padding: 15px;
 border: 3px dotted #cccccc;
}
#child{
 padding: 4px;
 border: 1px solid blue;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;


&lt;div id="parent"&gt;
  This is parent element, click to show the child element
  &lt;div id="child"&gt;Child&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>
