使用jQuery防止双击链接

xmq68pz9  于 2023-06-29  发布在  jQuery
关注(0)|答案(9)|浏览(126)

使用jQuery防止双击链接的最佳方法是什么?
我有一个触发 AJAX 调用的链接,当ajax调用返回时,它会显示一条消息。
问题是,如果我双击它,或者在 AJAX 调用返回之前单击两次,我最终会在页面上显示两条消息,而实际上我只需要一条消息。
我需要一个按钮上的disabled属性。但这对链接不起作用。

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

    //do ajax call
});
jdg4fx2g

jdg4fx2g1#

您可以使用data-属性,类似于以下内容:

$('a').on('click', function () {
   var $this = $(this);
   var alreadyClicked = $this.data('clicked');
   if (alreadyClicked) {
      return false;
   }
   $this.data('clicked', true);
   $.ajax({
      //some options
      success: function (data) { //or complete
         //stuff
         $this.data('clicked', false);
      }
   })
});
omtl5h9j

omtl5h9j2#

我带来了下一个简单的jquery插件:

(function($) {
  $.fn.oneclick = function() {
    $(this).one('click', function() {
      $(this).click(function() { return false; });
    });
  };
  // auto discover one-click elements
  $(function() { $('[data-oneclick]').oneclick(); });
}(jQuery || Zepto));

// Then apply to selected elements
$('a.oneclick').oneclick();

或者只是在html中添加自定义数据属性:

<a data-oneclick href="/">One click</a>
6rqinv9w

6rqinv9w3#

您需要**async:false**
默认情况下,所有请求都是异步发送的(即这在缺省情况下被设置为真)。如果您需要同步请求,请将此选项设置为false

$.ajax({
      async: false,
      success: function (data) { 

         //your message here
      }
   })
jq6vz3qz

jq6vz3qz4#

你可以使用一个虚拟类来实现这一点。

$('a#anchorID').bind('click',function(){
           if($(this).hasClass('alreadyClicked')){
              return false;
           }else{
                $(this).addClass('alreadyClicked);
                $/ajax({
                    success: function(){$('a#anchorID').removeClass('alreadyClicked');},
                    error: function(){$('a#anchorID').removeClass('alreadyClicked');}
                });
           }});
xyhw6mcr

xyhw6mcr5#

Check this example。您可以在第一次单击后通过CSS属性禁用按钮(并在 AJAX 请求后或使用setTimeout删除此属性)或使用jQuery.one()函数在第一次单击后删除触发器(无需禁用按钮)

var normal_button = $('#normal'),
  one_button = $('#one'),
  disabled_button = $('#disabled'),
  result = $('#result');

normal_button.on('click', function () {
  result.removeClass('hide').append(normal_button.html()+'<br/>');
});

one_button.one('click', function () {
  result.removeClass('hide').append(one_button.html()+'<br/>');
});

disabled_button.on('click', function () {
  disabled_button.attr('disabled', true);
  setTimeout(function () {
    result.removeClass('hide').append(disabled_button.html()+'<br/>');
  }, 2000);
});
li9yvcax

li9yvcax6#

虽然有一些很好的解决方案,但我最终使用的方法是只使用一个<button class="link">,我可以在其上设置disabled属性。
有时候最简单的解决方案就是最好的。

vs3odd8k

vs3odd8k7#

您可以使用Jquery再次禁用该链接上的单击事件

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

参考jsfiddle Demo

z3yyvxxp

z3yyvxxp8#

您可以禁用链接(例如,href="#"),并使用click事件,使用jQuery one()函数绑定到链接。

t1qtbnec

t1qtbnec9#

使用类“button”绑定所有链接,并尝试以下操作:

$("a.button").click(function() { $(this).attr("disabled", "disabled"); });
$(document).click(function(evt) {
     if ($(evt.target).is("a[disabled]"))
          return false;
});

相关问题