Jquery class removed after link click, but second click is still recognized
<p>I'm having a little problem.  I'm trying to use Jquery <code>load()</code> function to load in stuff on a page using AJAX. After the content has been loaded, and the link gets tapped on a second time, I need to loaded content to slideup/hide;  And when the same link is clicked for the 3+ time, I need to just toggle the loaded content display, since it's already been loaded once.  </p>

<p>My problem is that after clicking the link once, I remove the <code>loadable</code> class, but on the second click the same function executes as if the class were still there.  Here is my HTML:</p>

<pre><code>&lt;a title="Food" id="food" class="loadable" href="get-taste/food"&gt;Food&lt;/a&gt;
&lt;div class="food_load_space"&gt;&lt;/div&gt;
</code></pre>

<p>The link triggers the load and the data loads into <code>.food_load_space</code>.  And here's my JS:</p>

<pre><code>$(document).ready(function(){
  $('a.loadable').click(function(){ //executed upon link click 1;
    url = $(this).attr('href');
    linkid = $(this).attr('id');
    toload = url + ' #content-area';
    //now, remove loadable, add loaded and expanded
    $(this).removeClass('loadable');
    alert(toload);
    $('.' + linkid + '_load_space').load(toload);
    return false;
  }); //kill loadable
</code></pre>

<p>I'm also planning on adding an .expanded class and a <code>.loaded</code> class so that the script knows at which state the link is in.  But what happens is this function fires even if the <code>.loadable</code> class is gone.</p>
