title: Click event in jquery doesn't work
body: <p>I got a div with a default class of 'unlock' and text named 'UNLOCK'.
  when i click it, it says 'UNLOCK' and at the same time remove the class 'unlock' and add a class of 'lock'.</p>
  
  <p>html</p>
  
  <pre><code>&lt;div class='unlock'&gt;UNLOCKED&lt;/div&gt;
  </code></pre>
  
  <p>this worked</p>
  
  <pre><code>$('.unlock').click(function(){
      $(this).removeClass('unlock').addClass('lock').text('LOCKED');
  });
  </code></pre>
  
  <p>but this did not worked</p>
  
  <pre><code>$('.lock').click(function(){
     $(this).removeClass('lock');
  });
  </code></pre>
  
  <p>And I'm not sure why it didn't work coz the class was already replaced so it should work right?</p>
  
  <p>Basically, all I want is like a toggle functionality that when you first click it should say LOCKED. then when you click it again, it should say UNLOCKED. </p>
  
  <p>I tried the <code>toggle()</code> but it didn't work also or I just don't know how to implement it. So any ideas how I can make this functionality work?</p>
  
  <p>here's the <a href="http://jsfiddle.net/Lhdt4bto/" rel="nofollow">fiddle</a> </p>