Question

我的页面中有一个提交按钮。有时当我双击时，它会明显地提交，问题是我将信息保存在数据库中，因此我在那里会有重复的信息，而我并不想要这样。我尝试了一些类似下面的jquery代码，但它对我没用。

这里我的按钮标记是：

＆＃13;

<input type="submit" id="btnSubmit" class="btn btn-large btn-success"    style="padding-right:40px; padding-left:40px; text-align:center;">

＆＃13;

Jquery的：

   $(document).ready(function()
   {
     $('#btnSubmit').dblclick(function()
     {
        $(this).attr('disabled',true);
        return false;
     });
    });

如何进一步处理？防止默认无效

$(document).ready(function () {
    alert("inside click");
    $("#btnSubmit").on('dblclick', function (event) {  

       event.preventDefault();

 });
});

Answer 1

使用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);
     });
});

Answer 2

您也可以使用jquery one()来实现它，这只会触发一次事件，然后阻止事件处理程序。

$(document).ready(function () {
     $("#btnSubmit").one('click', function (event) {  
           event.preventDefault();
           $(this).prop('disabled', true);
     });
});

Answer 3

只需将此方法放入您的表单中，然后它就会处理一次双击或多次点击。一旦请求发送，它将不允许再次发送请求。

 <script type="text/javascript">
            $(document).ready(function(){
                 $("form").submit(function() {
                        $(this).submit(function() {
                            return false;
                        });
                        return true;
                    }); 
            }); 
            </script>

Answer 4

你应该做的是禁用FIRST mouseup事件上的按钮并保持禁用直到你的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);
            }
        });
    });
});

Answer 5

preventDefault()停止原始活动

小提琴：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;
    });
});

但是为了更好的解决方案，请参考this post

Answer 6

试试这个，

$(document).ready(function () {
    $("#btnSubmit").on("click", function() {
        $(this).attr("disabled", "disabled");
        doWork(); //this method contains your logic
    });
});

Answer 7

试试这个

＆＃13;

$(document).ready(function () {
     $("#btnSubmit").one('click', function (event) {  
           event.preventDefault();
           //do something
           $(this).prop('disabled', true);
     });
});

＆＃13;

Answer 8

jQuery的one（）将为每个绑定的元素触发附加的事件处理程序，然后删除事件处理程序。

如果由于某些原因不符合要求，也可以在点击按钮后完全禁用该按钮。



          $(document).ready(function () {
               $("#btnSubmit").one('click', function (event) {  
               event.preventDefault();
               //do something
               $(this).prop('disabled', true);
               });
          });

Answer 9

如果您要提交表格； event.preventDefault（）将停止第一次提交表单。如果您禁用了“单击”按钮，则不会提交表单，因为该按钮现已被禁用。无论哪种方式，表单都不会提交。

您要执行的操作是停止提交表单两次，而不是单击两次按钮。

尝试一下：

$('form[action="/Account/Login"]').on('submit', function () {
    $(this).find('button[type="submit"]').prop('disabled', true);
})

在表单提交时，就像单击任何提交按钮一样，它将在表单中查找其他任何提交按钮并将其禁用。确保将操作设置为您自己的操作。

Answer 10

我在尝试防止双击表单提交按钮时遇到了这个问题。事实证明，jQuery有一种在提交表单时采取行动的方法。

$('#myForm').on('submit', function () {
    $('#submit').attr('disabled', 'disabled');
});

这允许提交操作以及第一次单击后禁用的按钮。

Answer 11

为了防止在表单上点击提交按钮两次，或者允许用户在页面上做一次，我会做这样的事情：

$("#btnSubmit").bind ('click', function() {});
$("#btnSubmit").unbind('click');

Answer 12

试试这个

$(document).ready(function(){
  $('#btnSubmit').dblclick(function(e){
    e.preventDefault();
  });
});

如何防止提交按钮上的双击事件

12 个答案: