title: stopPropagation() not working?
body: <p>I'm new to Javascript and I'm trying my best to develop intuition for how events work in jquery. I'm developing a interactive user interface that allows users to edit objects attached to a component cell. In my code, I've created a grid of 2 columns and many rows. One of the columns consist of cells with the following html structure: </p>
  
  <p>When the user hovers over that cell, 3 buttons pop up: new, edit, delete. </p>
  
  <p>This all works but I'm having issues with:
  1. When the button is clicked, the menu doesn't appear. Also I believe there is event propagation to the ancestor component even though I use stopPropagation in button.click(). As a result clicking on the button invokes component.click() thus generating a new set of buttons. </p>
  
  <pre><code>$(function() {
  
      var $table = $('table');
      var $form = $('&lt;form&gt;')
      for (i = 42; i &gt; 0; i--) {
          $table.append('&lt;tr&gt;&lt;td class = "number"&gt;' + i + 
              '&lt;/td&gt;&lt;td class = "component"&gt;&lt;/td&gt;&lt;/tr&gt;');
      }
      /*
      $('td.component').on('click', function(e) {
          $(this).append('&lt;button type = "submit" class = "new"&gt;&lt;img class = "icon" src = "images/new.png" &gt;new&lt;/img&gt;&lt;/button&gt;' +
              '&lt;button class = "edit"&gt;&lt;img class = "icon" src = "images/edit.png"&gt;edit&lt;/img&gt;&lt;/button&gt;' +
              '&lt;button class = "delete"&gt;&lt;img class = "icon" src = "images/delete.png"&gt;delete&lt;/img&gt;&lt;/button&gt;');
      });*/
      /* support for hovering*/
      $('td.component').mouseover(function() {
          //$(this).css('background-color', '#ADD8E6');   
          $(this).append('&lt;button class = "new"&gt;&lt;img class = "icon" src = "images/new.png" &gt;new&lt;/img&gt;&lt;/button&gt;' +
              '&lt;button class = "edit"&gt;&lt;img class = "icon" src = "images/edit.png"&gt;edit&lt;/img&gt;&lt;/button&gt;' +
              '&lt;button class = "delete"&gt;&lt;img class = "icon" src = "images/delete.png"&gt;delete&lt;/img&gt;&lt;/button&gt;');
          });
      $('td.component').mouseout(function() {
          $(this).css('background-color', '#FFFFFF');
          $('button').remove();
      });
  
      $('button').mouseover(function() {
          $(this).show();
      });
  
      $('button.new').click(function(e) {
          e.stopPropagation();
          componentMenu();
      });
      $('button.edit').click(function(e){
          e.stopPropagation();
      });
      $('button.delete').click(function(e){
          e.stopPropagation();
      });
  
      function componentMenu() {
          var $menu = $('&lt;select&gt;');
          $menu.append('&lt;option&gt;Bloodhound&lt;/option&gt;');
          $menu.append('&lt;option&gt;Compute&lt;/option&gt;');
          $menu.append('&lt;option&gt;Powershelf&lt;/option&gt;');
          $menu.append('&lt;option&gt;Storage&lt;/option&gt;');
          $menu.append('&lt;option&gt;Switch&lt;/option&gt;');
      }
  
  });
  </code></pre>
  
  <ol>
  <li><p>Also when the user hovers over the component and then moves the cursor over the buttons the buttons fades in and out sporadically. I'm not sure how to prevent this effect though...one thought I had was to code mouseover for the button like this:</p>
  
  <p>$('button').mouseover(function() {
      $(this).show();
  });</p></li>
  </ol>
  
  <p>but this didn't make any difference.</p>
  
  <p>I appreciate the help.</p>