title: jquery click on a child ignore parent click
body: <blockquote>
    <p><strong>Possible Duplicate:</strong><br>
    <a href="https://stackoverflow.com/questions/7696098/prevent-click-event-from-affecting-parent-jquery">Prevent click event from affecting parent jquery</a>  </p>
  </blockquote>
  
  
  
  <p>I have a DOM structure similar to this:</p>
  
  <pre><code>&lt;div class="parent"&gt;
     &lt;div class="child"&gt;
  
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I have the following jQuery:</p>
  
  <pre><code>$('.parent').click(function(){
      $(this).hide();
  });
  </code></pre>
  
  <p>When <code>.child</code> is clicked I don't want the parent to hide but obviously because <code>.child</code> is a child of <code>.parent</code> this naturally happens. I've tried adding this:</p>
  
  <pre><code>$('.child').click(function(e){
      e.stopPropagation();
  });
  </code></pre>
  
  <p>But it still doesn't work. I've also tried replacing <code>e.stopPropagation</code> with <code>return false;</code> </p>
  
  <p>any suggestions?</p>
  
  <p><a href="http://jsfiddle.net/mPUTe/" rel="noreferrer">JSFiddle</a></p>