title: Jquery prevent onClick for parent DIV from firing
body: <p>I have a parent DIV with a background image, when you mouseover it <strong>fades in</strong> a little icon on the top right(a child div), the little icon is clickable and the parent div (that has the background image) is also clickable.</p>
  
  <p>My problem is when I click the little icon, the parent DIV's click event is also triggered.<br>
  I want only the child div's onclick to be called when I click the little icon. If I can get the href to work in the little icon that too would be acceptable.</p>
  
  <p>(Parent div: img1 and id "momClickable")<br>
  (Child div with icon: topIcon1)</p>
  
  <p><strong>Working fiddle is here:</strong> <a href="http://jsfiddle.net/auhjo9nw/" rel="nofollow">http://jsfiddle.net/auhjo9nw/</a></p>
  
  <p>My HTML:</p>
  
  <pre><code>&lt;div class="img1" id="momClickable"&gt;- img 206x206 here - 
  &lt;div class="topIcon1"&gt;&lt;a href="#"&gt;&lt;img src="momIcon.jpg" border="0" /&gt;&lt;/a&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The css for the above is:</p>
  
  <pre><code>.img1 {
      width:206px;
      height:206px;
      margin-left: auto;
      margin-right: auto;
      background:url(Mom206x206.jpg);
  }
  
  .topIcon1 {
      position:relative;
      width:45px;
      left: 155px;
      top: -10px;
      display:none;
  }
  </code></pre>
  
  <p>My jquery:</p>
  
  <pre><code>// To make the div clickable
  $('#momClickable').click(function() {
        console.log('You clicked the DIV.');
      }); 
  
  //To make the icon clickable
  $('.topIcon1').click(function() {
        console.log('You clicked the DIV 2.');
      });     
  
  $(function(){
      $(".pictureBoxWrapper1").hover(function(){
        $(this).find(".topIcon1").fadeIn(100);
        $('#momClickable').css('cursor','pointer');
      }
                      ,function(){
                          $(this).find(".topIcon1").fadeOut();
                      }
                     );        
  });
  </code></pre>