如何制止重複點擊發布AJAX jQuery中

我使用Django創建一個網站。而我只寫了投票頁面，當人們點擊，它會通過發佈數據的jQuery阿賈克斯。它做工精良這裏是代碼如何制止重複點擊發布AJAX jQuery中

<!doctype html> 
<html> 
<head> 
    <script src="jquery-1.10.2.min.js"></script> 
    <meta charset="utf-8"> 
    <title>vote</title> 
</head> 
<body> 
<script language="javascript" type="text/javascript"> 
$(function(){ 
    $(".post_up").click(function(){ 
     $.ajax({ 
      url:"/article/{{post.id}}/vote_up/", 
      type:'post',    
      success:function(msg){ 
       var beforevote = $(".btn").text();     
       if (msg==0){ 
        $(".pop_up_vote").empty().text("thanks,i get your vote!").show(300).delay(7000).hide(300); 
         }; 
         if (msg==1){ 
        $(".pop_up_vote").empty().text("you already voted,do not need vote again").show(300).delay(7000).hide(300); 
       }; 
     }) 

}) 
</script> 

<a href="javascript:" class="btn_gray_light post_up"><span><i class="icon_add"></i>vote</span></a> 
<div class ="pop_up_vote" > 
</div> 


</body> 
</html>

一切正常，我剛發現問題。我無法停止反覆點擊投票。如果我反覆點擊 <a href="javascript:" class="btn_gray_light post_up"><span><i class="icon_add"></i>vote</span></a>

它重複顯示pop_up消息，「我已經投了票，不要再投票」。所以我想，我可能通過刪除類post_up來解決問題，這樣，人們無法激活ajax發帖功能，所以我加$（this）.removeClass（）;

$(function(){ 

    $(".post_up").click(function(){ 
     $(this).removeClass(); 
     $.ajax({ 
      url:"/article/{{post.id}}/vote_up/", 
      type:'post',    
      success:function(msg){ 
       var beforevote = $(".btn").text();     
       if (msg==0){ 
        $(".pop_up_vote").empty().text("thanks,i get your vote!").show(300).delay(7000).hide(300); 
         }; 
         if (msg==1){ 
        $(".pop_up_vote").empty().text("you already voted,do not need vote again").show(300).delay(7000).hide(300); 
       }; 
     }) 

})

當我刪除類，我仍然有關於ajax的問題。我怎麼修復它？

來源

2014-02-27 zzlettle

試試這個：http://api.jquery.com/one/。

$('.post_up').one('click', function() {

一旦阿賈克斯做，你可以重新綁定相同的處理：

$('.post_up').one('click', function handler() { 
    var el = this; 
    $.ajax({ 
     url: '/article/{{post.id}}/vote_up/', 
     type: 'post', 
     success: function (msg) { 
      $(el).one('click', handler);

這裏是一個演示：http://jsfiddle.net/wared/CVm37/。

來源

2014-02-27 19:08:26 leaf

我要的是，一旦阿賈克斯發送數據成功，點擊禁用，人們無法點擊按鈕發送數據，因爲每次點擊按鈕，客戶端都會重新發送數據，並顯示pop_up按鈕。如果速度快足夠了，它會彈出很多相同的消息。 – zzlettle

@zzlettle閱讀文檔。這正是'.one（）'所做的。 – leaf

是的，它的工作。謝謝 – zzlettle

我認爲這個問題是該行爲已被設置爲鏈接，所以去除類不會做任何

試試這個，而不是

$(".post_up").unbind("click");

來源

2014-02-27 19:09:18 roryok

如何制止重複點擊發布AJAX jQuery中

回答

相關問題