单击链接后禁用链接的最佳方法是不应该进行 ajax 调用

Question

我正在使用以下代码发送一个可以正常工作的 ajax 请求，但是当用户多次单击链接时会产生问题，所以我想禁用我的链接，以便在用户第二次单击时不会调用 ajax .

.html.erb

<%= link_to("Sports", "#", :class => "school_activity", :p_type => "Sport", :o_type => "")%>

javascript

jQuery(function () {
  jQuery('.school_activity').click(function () {
    link = jQuery(this);
    p_type = link.attr('p_type');
    o_type = link.attr('o_type');
    jQuery('.i-link a').removeClass('stream_wall_select');
    jQuery.ajax({
      type:"GET",
      url:'<%= some_path(@school) %>',
      data:'format=js&p_type=' + p_type + '&tagged_type=' + o_type,
      success:function (response) {
        jQuery('#s_activity_div').html(response);
      }
    });
  })
})

我不想设置参数 true/false 并依赖它发送 ajax 请求。

我想要一些非常通用的东西，可能适用于我网站上的所有 ajax 链接。

Answer 1

在点击发生时移除href属性，并在点击完成时将其添加回来。

...
  jQuery('.school_activity').click(function () {
    var link = $(this).attr('href');
    jQuery(this).removeAttr('href');
   ...
    jQuery.ajax({ .... });
   ...
    jQuery(this).attr("href",link);
...

更新

使用 jQuery 方法 one() 确保某些内容只执行一次。

将处理程序附加到元素的事件。每个元素最多执行一次处理程序。

jQuery('.school_activity').one('click', function () {
    jQuery.ajax({
        ...
    });
});

注意：这将只运行一次，无论 AJAX 是否失败。

Answer 2

第一个简单通用的解决方案 - 使用同步调用：

jQuery.ajax({
      type:"GET",
      async: false,
...

在这种情况下，浏览器将等待调用完成。但它有时会导致页面冻结（在等待时）

第二种解决方案是使用自定义标志/属性，尽管您讨厌它（查看 in_progress 属性）：

jQuery(function () {
  jQuery('.school_activity').click(function () {
    if( $(this).attr('in_progress') ) return;

    link = jQuery(this);
    p_type = link.attr('p_type');
    o_type = link.attr('o_type');
    jQuery('.i-link a').removeClass('stream_wall_select');

    $(this).attr('in_progress', 1);
    var link = this;

    jQuery.ajax({
      type:"GET",
      url:'<%= some_path(@school) %>',
      data:'format=js&p_type=' + p_type + '&tagged_type=' + o_type,
      success:function (response) {
        jQuery('#s_activity_div').html(response);
      }, 
      complete: function(){ $(link).removeAttr('in_progress'); }
    });
  })
})

为了使它成为一个健壮且通用的解决方案，我们可以为这种情况创建一个自定义函数：

function waCall( element, ajaxParams, beforeAjaxCallback, afterAjaxCallback ) {

    if( $(element).attr('in_progress') ) return; 

    var link = $(element);
    $(link).attr( 'in_progress' );

    ajaxParams['complete'] = function() { $(link).removeAttr('in_progress');
                             if( afterAjaxCallback ) afterAjaxCallback( link ); };

    if( beforeAjaxCallback ) beforeAjaxCallback(link);

    $.ajax( ajaxParams );
}


jQuery(function () {
      jQuery('.school_activity').click(function () {
          waCall( this, {
              type:"GET",
              url:'<%= some_path(@school) %>',
              data:'format=js&p_type=' + p_type + '&tagged_type=' + o_type,
              success:function (response) {
                  jQuery('#s_activity_div').html(response);
              }
            }, function(link) {
                var p_type = link.attr('p_type');
                var o_type = link.attr('o_type');
                jQuery('.i-link a').removeClass('stream_wall_select');
            }
      }
});

Answer 3

你可以使用像

这样的标志

$(function(){
 $flag=false;

 $("#idOfYourLink").click(function(e){
   e.preventDefault();
   $flag=true;
   if(!$flag){
     $.ajax({
       ...
       success:function(){
           $flag=false;
         }//success ends
       });//ajax ends
    }//flag chk if ends
  });//click handler ends
});//document ready ends

编辑：

因为你特别提到

我不想做诸如设置参数真/假之类的事情并依赖它发送> ajax 请求。

您可以简单地解除点击事件处理程序的绑定，并在ajax调用的成功回调中重新附加；

Answer 4

简单的删除和添加触发器类

$(document).on('click', '.click', function(e){
        e.preventDefault();

        $(this).removeClass('click');

        $.ajax({
            url: "/question",
            method: "POST",  
            dataType: 'json',
            cache: false,
            data: form_data,
            success: function (response){

            }
        }).done(function() { $(this).addClass('click');  } );

    });