title: Jquery on click child element triggers on click parent element
body: <p>I've similar to this:</p>
  
  <pre><code>&lt;ul&gt;
  &lt;li class="parent"&gt;
  &lt;div class="child"&gt;&lt;/div&gt;
  &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>And I've two on click triggers.</p>
  
  <pre><code>$(document).on("click", ".parent", function(){
  console.dir("parent clicked");
  });
  
  $(document).on("click", ".child", function(){
  console.dir("child clicked");
  });
  </code></pre>
  
  <p>If I click child, parent is also clicked!
  How do i avoid this?</p>
  
  <p><a href="http://jsfiddle.net/Vd2GA/" rel="nofollow">http://jsfiddle.net/Vd2GA/</a></p>