title: jQuery click() still being triggered after .clickable class is removed
body: <p>I've got a click event assigned to a div of a particular class. When the click occurs, the class is removed from the div. However, you can still click the div and the <code>click()</code> event is triggered (even though the class has since been removed). Here's an example:</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class="clickable"&gt;
    &lt;p&gt;Click me&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>JavaScript/jQuery:</strong></p>
  
  <pre><code>$('.clickable').click(function() {
    $(this).removeClass('clickable');
    $(this).addClass('not-clickable');
    alert('Clicked!');
  });
  </code></pre>
  
  <p>I can see the classes are removed and added (as the colour of the text changed as per my CSS). However, you are still able to click the div multiple times and the <code>alert()</code> will still appear.</p>
  
  <p>This also seems to occur in reverse; so if I add the <code>clickable</code> class to a div, the code in   <code>$('.clickable').click(function() {...});</code> doesn't run (but visually, the div changes as per the new styles).</p>
  
  <p>How can I make it so that the click events match up to the classes, even after jQuery adds/removes the <code>clickable</code> class?</p>