jquery click on a child ignore parent click
<blockquote>
  <p><strong>Possible Duplicate:</strong><br>
  <a href="http://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="nofollow">JSFiddle</a></p>
