title: Fire click event for only innermost element in jQuery
body: <p>I'm trying to fire a click event on the innermost element in the HTML tree, but since there is a click even tied to its parent container, both events are fired, which is not what I need. I have fixed this before with stopPropagation(), but I can't seem to get it to work today.</p>
  
  <pre><code>jQuery('#parent li').click(function() {
      jQuery(this).children('.contained').slideDown();
  });
  jQuery('.contained').click(function() {                 
      Query(this).slideUp();
  });
  </code></pre>
  
  <p>and let's say here is our HTML:</p>
  
  <pre><code>&lt;ul id="parent"&gt;
      &lt;li&gt;
          click to show more
          &lt;p class="contained"&gt;click to hide&lt;/p&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I believe this won't validate since it has a p contained within an li, but let's ignore that momentarily for simplicity's sake. How can I have the inner element slideUp() without have the parent click even trigger it to slideDown() immediately after?</p>