使用jQuery防止双击链接的最佳方法是什么?我有一个触发 AJAX 调用的链接,当ajax调用返回时,它会显示一条消息。问题是,如果我双击它,或者在 AJAX 调用返回之前单击两次,我最终会在页面上显示两条消息,而实际上我只需要一条消息。我需要一个按钮上的disabled属性。但这对链接不起作用。
disabled
$('a').on('click', function(e){ e.preventDefault(); //do ajax call });
jdg4fx2g1#
您可以使用data-属性,类似于以下内容:
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); } }) });
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>
6rqinv9w3#
您需要**async:false**默认情况下,所有请求都是异步发送的(即这在缺省情况下被设置为真)。如果您需要同步请求,请将此选项设置为false。
false
$.ajax({ async: false, success: function (data) { //your message here } })
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');} }); }});
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); });
li9yvcax6#
虽然有一些很好的解决方案,但我最终使用的方法是只使用一个<button class="link">,我可以在其上设置disabled属性。有时候最简单的解决方案就是最好的。
<button class="link">
vs3odd8k7#
您可以使用Jquery再次禁用该链接上的单击事件
$(this).unbind('click');
参考jsfiddle Demo
z3yyvxxp8#
您可以禁用链接(例如,href="#"),并使用click事件,使用jQuery one()函数绑定到链接。
href="#"
click
one()
t1qtbnec9#
使用类“button”绑定所有链接,并尝试以下操作:
$("a.button").click(function() { $(this).attr("disabled", "disabled"); }); $(document).click(function(evt) { if ($(evt.target).is("a[disabled]")) return false; });
9条答案
按热度按时间jdg4fx2g1#
您可以使用
data-
属性,类似于以下内容:omtl5h9j2#
我带来了下一个简单的jquery插件:
或者只是在html中添加自定义数据属性:
6rqinv9w3#
您需要**async:false**
默认情况下,所有请求都是异步发送的(即这在缺省情况下被设置为真)。如果您需要同步请求,请将此选项设置为
false
。jq6vz3qz4#
你可以使用一个虚拟类来实现这一点。
xyhw6mcr5#
Check this example。您可以在第一次单击后通过CSS属性禁用按钮(并在 AJAX 请求后或使用setTimeout删除此属性)或使用jQuery.one()函数在第一次单击后删除触发器(无需禁用按钮)
li9yvcax6#
虽然有一些很好的解决方案,但我最终使用的方法是只使用一个
<button class="link">
,我可以在其上设置disabled
属性。有时候最简单的解决方案就是最好的。
vs3odd8k7#
您可以使用Jquery再次禁用该链接上的单击事件
参考jsfiddle Demo
z3yyvxxp8#
您可以禁用链接(例如,
href="#"
),并使用click
事件,使用jQueryone()
函数绑定到链接。t1qtbnec9#
使用类“button”绑定所有链接,并尝试以下操作: