title: Odin Project Etch a sketch issue with multiple event handlers
body: <p>I'm working on the <a href="http://www.theodinproject.com/web-development-101/javascript-and-jquery" rel="nofollow noreferrer">js/JQuery project</a> on The Odin Project with a partner, and we've hit a wall with the very last task, which is to increase the opacity of the squares as the mouse reenters them. We got stuck while trying to achieve this via two css classes, and creating mouseenter events for each. </p>
  
  <p>Essentially, we want to start with all of the squares being the <code>grey</code> class, and after entering them for the first time, assigning them the <code>fiftyshades</code> class. When subsequently entering them, we want the event handler for the fiftyshades class to increase the opacity.</p>
  
  <p>However, once the element has both classes, it never enters the <code>mouseenter</code> function for fiftyshades, only for grey. We've already worked around it by putting the opacity logic inside the <code>grey.mouseenter</code>, but according to <a href="https://stackoverflow.com/a/12684878">this</a> answer, I would think that our original approach should work. That says that both handlers should be called, but debugging I can clearly see that <code>fiftyshades.mouseenter</code> is never entered.</p>
  
  <p>This is where we stand after much fiddling with the relevant javascript for this functionality:</p>
  
  <pre><code>$("#fiftyshades").click(function() {
  reset();
  
  $(".grey").mouseenter(function(){
      if (!$(this).hasClass("fiftyshades"))
      {
          $(this).addClass("fiftyshades");
          console.log("Adding fiftyshades")
          if ($(this).hasClass("fiftyshades"))
          {
              console.log("Add was success");
              console.log("Classes: ")
              var className = $(this).attr('class');
              console.log("     " + className);
          }
      }
  });
  
  $(".fiftyshades").mouseenter(function(){
      var shade =  parseFloat($(this).css("opacity"));
      console.log("Shade: " + shade);
      if (shade &lt; 1) {
          $(this).css("opacity", shade + 0.1);
      }
  });
  });
  </code></pre>
  
  <p><a href="http://jsfiddle.net/2juL2xk4/" rel="nofollow noreferrer">Here</a>'s a fiddle with the full project. Enter some number to start with, then hit <code>Reset fifty shades</code> to access this functionality.</p>