title: JQuery not removing class?
body: <p>So, I am trying to create blocks that cycle through some colors. Each color is defined by a class, and I remove a certain class color, then add another class color when a block is clicked. Each segment of code looks like this: </p>
  
  <pre><code>//Function 1
  $('.blue').click(function(){
      console.log("Blue has been clicked");
      $(this).addClass('green');
      $(this).removeClass('blue');
  }); 
  
  //Function 2
  $('.green').click(function(){
      console.log("Green has been clicked");
      $(this).addClass('yellow');
      $(this).removeClass('green');
  }); 
  </code></pre>
  
  <p>When a block is clicked a first time, the color is changed. But when I click it again, the color does not change. </p>
  
  <p>I added <code>console.log</code> statements to monitor in Console what was happening. As an example, when I click a box that has the <code>blue</code> class, it adds the <code>green</code> class, and the <code>blue</code> class is removed. But when I click the same box (that is now green) I expect the second function to run, and the box to change into a yellow color. However, what I can see through the console is that the first function is trying to run again.</p>
  
  <p>I checked the HTML, and the classes do change.</p>
  
  <p>My question is, why is function 1 triggered when the first box is no longer a member of the <code>blue</code> class? Should it not be calling function 2, since it is now a member of the <code>green</code> class? </p>
  
  <p>The CodePen is <a href="http://codepen.io/SammyIsra/pen/zxeZpm" rel="nofollow">here</a>, I am actively working on it. I will mention here when the CodePen works.</p>
  
  <p>**The CodePen now works, I used <code>$(document).on('click', '.green')</code> instead of <code>$('.green).click()</code> **</p>
  
  <p>Thank you!</p>