如何防止提交按鈕上的雙擊事件

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>