title: Making a button unclickable until jquery .load() has finished
body: <p>I'm currently using the following code for my read more buttons:</p>
  
  <pre><code>$(document).ready(function() {
    $("a.more-link").attr("href", "");
    $("a.more-link").attr("onclick", "return false;");  
  
    $('.readmore').each(function(index) {
      var $link = $(this);
      $(".readmore").prependTo('.' + $link.attr("id") + ' &gt; #bottominfo');
    });
  
    $('.readmore').click(function() {  
      var $link = $(this);
      if ( $link.attr("alt") == "read more" ) {
        $('.' + $link.attr("id") + ' &gt; #maincontent').load($link.attr("title") + ' #mainarticle', function(index) {
              $('.' + $link.attr("id") + ' &gt; #maincontent').hide();  
              $('.' + $link.attr("id") + ' &gt; #maincontent').slideToggle('slow');
            });
  
        $('.' + $link.attr("id") + ' &gt; #maincontent').attr("class", $link.attr("id"));
  
        $link.attr('alt','read less');      
      } else {
        $('#'+ $link.attr("id") + ' &gt; .' + $link.attr("id")).hide();
        $link.attr('alt','read more'); 
      }
      return false;
   });
  });
  </code></pre>
  
  <p>The problem I'm having is that if the user double clicks (or more) on the button it calls the function multiple times.</p>
  
  <p>How do I make the button non-clickable until the .load() have finished?</p>
  
  <p>Thanks!</p>