title: Change class but click not recognizing the new class
body: <p>I have the following html:</p>
  
  <pre><code>&lt;div class="showMap" id="mapVis" style="cursor:pointer"&gt;(Show map)&lt;/div&gt;
  &lt;div id="map"&gt;hello world&lt;/div&gt;
  </code></pre>
  
  <p>Div <code>#map</code> is hidden as shown below (there's a reason for hiding it this way, it holds a google map), then I want to click <code>(Show map)</code> and the div appears. This is ok. Then I change the class and the html of the <code>#mapVis</code> div and want the next click to hide <code>#map</code> - but it doesn't. Honestly I don't know what its doing but its as if it ignores the new class and reverts to the actions as if previous class was still attached to the <code>#mapVis</code> div.</p>
  
  <p>Here's the JQuery:</p>
  
  <pre><code>var map2 = $('#map');
  map2.css('position','absolute').css('left','-9999em');
  
  $('.showMap').click(function(){
      map2.hide().css('position','relative').css('left','0em').slideDown();
      $('#mapVis').removeClass('showMap').addClass('hideMap').html('(Hide map)');
  });
  
  $('.hideMap').click(function(){
      map2.css('position','absolute').css('left','-9999em');
      $('#mapVis').removeClass('hideMap').addClass('showMap').html('(Show map)');
  });
  </code></pre>
  
  <p><a href="http://jsfiddle.net/darrensw/jhXV4/" rel="nofollow">Here's a fiddle</a></p>