Faire un bouton cliquables jusqu'à jquery .load() a terminé

Question

J'utilise actuellement le code suivant pour mes lire plus de boutons:

$(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") + ' > #bottominfo'); 
    }); 

    $('.readmore').click(function() { 
    var $link = $(this); 
    if ($link.attr("alt") == "read more") { 
     $('.' + $link.attr("id") + ' > #maincontent').load($link.attr("title") + ' #mainarticle', function(index) { 
      $('.' + $link.attr("id") + ' > #maincontent').hide(); 
      $('.' + $link.attr("id") + ' > #maincontent').slideToggle('slow'); 
      }); 

     $('.' + $link.attr("id") + ' > #maincontent').attr("class", $link.attr("id")); 

     $link.attr('alt','read less');  
    } else { 
     $('#'+ $link.attr("id") + ' > .' + $link.attr("id")).hide(); 
     $link.attr('alt','read more'); 
    } 
    return false; 
}); 
}); 

Le problème que je vais avoir est que si l'utilisateur double-clique (ou plus) sur le bouton, il appelle la fonction plusieurs fois.

Comment rendre le bouton non-cliquable jusqu'à ce que le .load() soit terminé?

Merci!

Answer 1

Le plus simple serait d'ajouter une classe de chargement au lien. J'ai également fait un rapide nettoyage de votre code. Je ne regardais pas la façon dont cela fonctionne, mais je suis sûr que si vous passez un peu plus de temps, vous pouvez le rendre beaucoup plus efficace

$(document).ready(function() { 
    $("a.more-link").attr("href", "") 
        .attr("onclick", "return false;"); 

    $('.readmore').each(function(index) { 
    var $link = $(this); 
    //wouldn't this call all the elements with "readmore" class???? 
    $(".readmore").prependTo('.' + $link.attr("id") + ' > #bottominfo'); 
    }); 

    $('.readmore').click(function() { 
    var $link = $(this); 

    //check if it has already been clicked 
    if($link.hasClass("loading")) return false; 
    //add the loading class 
    $link.addClass("loading"); 


    if ($link.attr("alt") == "read more") { 
     $('.' + $link.attr("id") + ' > #maincontent').load($link.attr("title") + ' #mainarticle', function(index) { 
      $('.' + $link.attr("id") + ' > #maincontent').hide() 
                 .slideToggle('slow'); 

      //it's done now and we can remove the loading class so we can click it again 
      $link.removeClass("loading"); 

      }).attr("class", $link.attr("id")); 

     $link.attr('alt','read less');  
    } else { 
     $('#'+ $link.attr("id") + ' > .' + $link.attr("id")).hide(); 
     $link.attr('alt','read more'); 

     //add it here as well 
     $link.removeClass("loading"); 
    } 
    return false; 
}); 
}); 

Conseils: Je remarque que vous appelez les mêmes sélecteurs plusieurs fois. Vérifiez toujours le api doc et voyez ce que les méthodes que vous appelez font revenir. La plupart d'entre eux retournent l'élément arrière, donc vous pouvez appeler la méthode suivante sans $()

Exemple: $("div").hide().slideToggle('slow');

Answer 2

Pourriez-vous simplement exécuter la fonction sur .load à la place?

$(document).load(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") + ' > #bottominfo'); 
    }); 

    $('.readmore').click(function() { 
    var $link = $(this); 
    if ($link.attr("alt") == "read more") { 
     $('.' + $link.attr("id") + ' > #maincontent').load($link.attr("title") + ' #mainarticle', function(index) { 
      $('.' + $link.attr("id") + ' > #maincontent').hide(); 
      $('.' + $link.attr("id") + ' > #maincontent').slideToggle('slow'); 
      }); 

     $('.' + $link.attr("id") + ' > #maincontent').attr("class", $link.attr("id")); 

     $link.attr('alt','read less');  
    } else { 
     $('#'+ $link.attr("id") + ' > .' + $link.attr("id")).hide(); 
     $link.attr('alt','read more'); 
    } 
    return false; 
}); 
});