防止多個Ajax提交

我已經運行此jQuery代碼，允許用戶點擊保存後作爲一個個書籤鏈接WordPress博客。每篇文章顯示一個總書籤計數器，如下所示：「已加書籤（5）」。儘管此代碼有效，但只要有人在書籤鏈接上單擊多次，然後將多個書籤保存爲相同的帖子，就會註冊多次點擊。當用戶通過再次單擊書籤鏈接嘗試刪除書籤時，它會再次註冊多個點擊，並且計數器開始顯示減號，如下所示：「已加書籤（-5）」。防止多個Ajax提交

我一直在尋找如何防止這種情況發生，這樣的書籤計數器從未運行負，並且用戶不能書籤同一職位多次，但沒有成功，到目前爲止的指令。

下面是我使用的jQuery代碼：

jQuery(document).ready(function($) { 

var added_message = upb_vars.added_message; 
var delete_message = upb_vars.delete_message 

$(document).on('click', '.upb_add_bookmark', function() { 

    var post_id = $(this).attr('rel'); 
    var data = { 
     action: 'bookmark_post', 
     post_read: post_id 
    }; 
    $.post(upb_vars.ajaxurl, data, function(response) { 

     $('.upb_bookmark_control_'+post_id).toggle(); 
     if($('.upb-bookmarks-list').length > 0) { 
      var bookmark_data = { 
       action: 'insert_bookmark', 
       post_id: post_id 
      }; 
      $.post(upb_vars.ajaxurl, bookmark_data, function(bookmark) { 
       $(bookmark).appendTo('.upb-bookmarks-list'); 
       $('.no-bookmarks').fadeOut(); 
      }); 
     } 
    }); 
    return false; 
}); 

$(document).on('click', '.upb_del_bookmark', function() { 

     var post_id = $(this).attr('rel'); 
     var data = { 
      action: 'del_bookmark', 
      del_post_id: post_id 
     }; 
     $.post(upb_vars.ajaxurl, data, function(response) { 
      $('.bookmark-'+post_id).fadeOut(); 
      $('.upb_bookmark_control_'+post_id).toggle(); 
     }); 

    return false; 
}); 
});

能否請你幫我解決這個問題？

非常感謝！

來源

2014-10-04 Avinash Kumar

一種方法是$.post()前一個.disabled類添加到您的鏈接。

// Before ajax... 
if ($(this).hasClass('disabled')) { 
    return false; 
} else { 
    $(this).addClass('disabled'); 
} 
// Make sure we refer to the same element 
var that = this; 

// On post success... 
$(that).removeClass('disabled');

來源

2014-10-04 13:12:25 parchment

謝謝，羊皮紙，提供這種解決方案！這段代碼完美地工作與你的幫助，但我不知道目前的行爲非常用戶友好。目前，在應用您的解決方案後，它允許用戶點擊一次以添加書籤並再次點擊以將其刪除，但在此之後，第三次點擊會使頁面跳轉到頂部，這將使許多用戶感到困惑。能否請你幫我，這樣我可以讓用戶添加/刪除書籤，因爲他們要爲很多次都沒有使他們的點擊跳到3日點擊仍然能夠防止多個AJAX的職位？謝謝！ – 2014-10-04 15:23:11

@AvinashSingh你應該用'return false'替換'return'。但是，這意味着''.disabled'類不會被刪除。我認爲你可能需要在你的第一個'.post（）'語句裏面添加一個'else {$（that）.removeClass ...}'到'if（$（..）。> 。 – parchment 2014-10-04 15:38:51

非常感謝，羊皮紙！你是一個拯救生命的人！ – 2014-10-04 17:34:53

防止多個Ajax提交

回答

相關問題