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

Question

我在我的页面上有一个提交按钮。有时当我双击它时显然会提交双重提交，问题是我将信息保存在数据库中，所以我将在那里重复信息，而我不想那样。我尝试了一些像下面这样的jquery代码，但它并不适合我。

这里我的按钮标签是：

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

如何进一步进行的preventDefault不工作

$(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

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 3

你也可以使用，jQuery的one()来实现它，这会火该事件只有一次，然后阻止事件处理程序。

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

Answer 4

试试这个，

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

Answer 5

什么，你应该做的是禁止在首次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 6

试试这个

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

Answer 7

jQuery的一个（）将启动一次附加的事件处理程序结合的每种元素，然后删除该事件处理程序。

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

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

Answer 8

试试这个

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

Answer 9

只是把这个方法在你的表格，然后它会处理双击或一次点击更多。 一旦请求发送它将不允许发送一次又一次的请求。

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