Javascript 使按钮在jquery.load（）完成之前不可单击

我目前正在为我的“阅读更多”按钮使用以下代码：

$(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;
 });
});

我遇到的问题是，如果用户双击（或更多）按钮，它会多次调用该函数

如何使按钮在.load（）完成之前不可单击

---

谢谢

您是否可以在.load上运行函数

$(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;
 });
});

---

最简单的方法是向链接添加加载类。我还刚刚对您的代码进行了快速清理。我没有研究它是如何工作的，但我相信如果你花多一点时间，你可以使它更有效率

$(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;
 });
});

提示：我注意到您多次调用相同的选择器。始终检查并查看您调用的方法返回什么。大多数方法都会返回元素，因此您可以调用下一个方法，而无需

$（）

---

示例：

$（“div”）.hide（）.slideToggle（'slow'）
有时它加载得很好，有时它看起来很不稳定，完全重置了页面。要测试它，请在$link.addClass（“加载”）之后添加alert（）；即使在加载内容之前双击，您也会看到一条警告消息没有问题！我不知道这是否是最好的方法，但如果我想快速阻塞，我通常会这样做。这似乎也没有帮助。我不知道为什么它不能顺利加载。