title: Jquery Onclick not happening second time
body: <p>I'm a bit confused as to why this isn't working; I assume that because I'm adding the class and its not being added back into the collection I'm not sure.</p>
  
  <p>Here it is on a jsbin <a href="http://jsbin.com/ayije" rel="nofollow noreferrer">http://jsbin.com/ayije</a> although code is below also.</p>
  
  <p>Either way I can only get the action to happen on an element once.</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" charset="utf-8"&gt;
          $(document).ready(function () {
              $('.optional').click(function () {
                  $(this).removeClass('optional').addClass('selected');
                  return false;
              }); 
              $('.selected').click(function () {
                  $(this).removeClass('selected').addClass('rejected');
                  return false;
              });
              $('.rejected').click(function () {
                  $(this).removeClass('rejected').addClass('optional');
                  return false;
              });
          });
          &lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;style&gt;
              a {padding:2px;color:white;}
              .optional {background-color:blue;}
              .selected {background-color:green;}
              .rejected {background-color:red;}
          &lt;/style&gt;
  
  
          &lt;div id="tagContainer"&gt; 
          &lt;a href="#" class="rejected"&gt;a&lt;/a&gt;
          &lt;a href="#" class="optional""&gt;b&lt;/a&gt;
          &lt;a href="#" class="selected"&gt;c&lt;/a&gt;
      &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>