jQuery 如何防止提交按钮上的双击事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36767731/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to prevent double click event on submit button
提问by sireesha j
I have a submit button in my page. Sometimes when I double click it double submits obviously, and the problem is that I'm saving the information in the database so I'll have duplicate information there, and I don't want that. I tried some jquery code like below but it didn't work for me.
我的页面中有一个提交按钮。有时，当我双击它时，它显然会双重提交，问题是我将信息保存在数据库中，所以那里会有重复的信息，而我不想要那样。我尝试了一些像下面这样的 jquery 代码，但它对我不起作用。
Here my button tag is:
这里我的按钮标签是：
<input type="submit" id="btnSubmit" class="btn btn-large btn-success" style="padding-right:40px; padding-left:40px; text-align:center;">
Jquery:
查询：
$(document).ready(function()
{
$('#btnSubmit').dblclick(function()
{
$(this).attr('disabled',true);
return false;
});
});
How to proceed further?Preventdefault is not working
如何继续？Preventdefault 不起作用
$(document).ready(function () {
alert("inside click");
$("#btnSubmit").on('dblclick', function (event) {
event.preventDefault();
});
});
采纳答案by madalinivascu
Use setTimeout for a more user friendly way
使用 setTimeout 以获得更用户友好的方式
$(document).ready(function () {
$("#btnSubmit").on('click', function (event) {
event.preventDefault();
var el = $(this);
el.prop('disabled', true);
setTimeout(function(){el.prop('disabled', false); }, 3000);
});
});
回答by Bachas
just put this method in your forms then it will handle double click or more clicks in once. once request send it will not allow to send again and again request.
只需将此方法放入您的表单中，它就会一次性处理双击或多次点击。一旦请求发送，它将不允许一次又一次地发送请求。
<script type="text/javascript">
$(document).ready(function(){
$("form").submit(function() {
$(this).submit(function() {
return false;
});
return true;
});
});
</script>
回答by Nandhini
You can also use, jquery one()to achieve it, this will fire the event only once and then prevent the event handler.
您也可以使用 jqueryone()来实现它，这只会触发一次事件，然后阻止事件处理程序。
$(document).ready(function () {
$("#btnSubmit").one('click', function (event) {
event.preventDefault();
$(this).prop('disabled', true);
});
});
回答by AdityaParab
What you should be doing is disabling the button on FIRST mouseupevent and keep it disabled till your ajax call succeeds.
您应该做的是在 FIRSTmouseup事件上禁用按钮并保持禁用状态，直到您的 ajax 调用成功。
$(document).on('ready', function(){
$('#btnSubmit').on('mouseup', function(event){
var $this = $(this);
if($this.prop('disabled')) return;
$(this).prop('disabled',true);
$.ajax({
/*
Your config
*/,
success: function(data){
console.log(data);
$this.prop('disabled', false);
}
});
});
});
回答by JYoThI
try this
尝试这个
$(document).ready(function () {
$("#btnSubmit").one('click', function (event) {
event.preventDefault();
//do something
$(this).prop('disabled', true);
});
});回答by Monish Mano Stephen
jQuery's one() will fire the attached event handler once for each element bound, and then remove the event handler.
jQuery 的 one() 将为每个绑定的元素触发一次附加的事件处理程序，然后删除事件处理程序。
If for some reason that doesn't fulfill the requirements, one could also disable the button entirely after it has been clicked.
如果由于某种原因不满足要求，也可以在单击按钮后完全禁用该按钮。
$(document).ready(function () {
$("#btnSubmit").one('click', function (event) {
event.preventDefault();
//do something
$(this).prop('disabled', true);
});
});
回答by Prabhat Sinha
try this,
尝试这个，
$(document).ready(function () {
$("#btnSubmit").on("click", function() {
$(this).attr("disabled", "disabled");
doWork(); //this method contains your logic
});
});
回答by Ramon Bakker
preventDefault()stops the original event
preventDefault()停止原始事件
Fiddle: http://zeering.in/aE6EpDZ6UPU=/Prevent-Double-Click-event-by-disabled-Button-using-JQuery
小提琴：http: //zeering.in/aE6EpDZ6UPU=/Prevent-Double-Click-event-by-disabled-Button-using-JQuery
$(document).ready(function()
{
$('#btnSubmit').dblclick(function(event)
{
event.preventDefault();
$(this).attr('disabled',true);
return false;
});
});
But for the better solution, i refer to this post
但是为了更好的解决方案，我参考了这篇文章
回答by Tod
If you are submitting a form; event.preventDefault() is going to stop the form submitting the first time. If you disable the button on 'click' the form won't submit because the button is now disabled. Either way, the form will never submit.
如果您正在提交表格；event.preventDefault() 将停止第一次提交表单。如果您在“单击”时禁用按钮，则表单将不会提交，因为该按钮现在已禁用。无论哪种方式，表单都不会提交。
What you want to be doing is stopping the form being submitted twice, rather than the button being clicked twice.
您想要做的是停止提交两次表单，而不是单击按钮两次。
Try this:
尝试这个：
$('form[action="/Account/Login"]').on('submit', function () {
$(this).find('button[type="submit"]').prop('disabled', true);
})
On form submit, as in when the any submit button has been clicked, it'll look for any other submit button in the form and disable it. Make sure you set the action to yours.
在表单提交时，当任何提交按钮被点击时，它会在表单中查找任何其他提交按钮并禁用它。确保您将操作设置为您的操作。
回答by illpallozzo
I ran into this question as I was attempting to prevent double clicking of form submit buttons. It turns out jQuery has a way to act upon submit of a form.
我在试图防止双击表单提交按钮时遇到了这个问题。事实证明，jQuery 有一种方法可以在提交表单时采取行动。
$('#myForm').on('submit', function () {
$('#submit').attr('disabled', 'disabled');
});
This allowed the submit action as well as the button becoming disabled after the first click.
这允许提交操作以及按钮在第一次点击后被禁用。
