Javascript 防止在多次单击时提交多个ajax

我有一个WordPress博客，运行jQuery代码，允许用户单击书签链接，将文章另存为书签。每篇文章都显示一个总书签计数器，看起来像：“书签（5）”。虽然这段代码可以工作，但只要有人多次单击书签链接，它就会注册多次单击，然后将同一帖子保存为多个书签。当用户再次单击书签链接试图删除书签时，它再次注册多次单击，计数器开始显示负数，看起来像：“Bookmarked（-5）”

我一直在寻找如何防止这种情况发生的说明，这样书签计数器就不会运行负数，用户就不能多次为同一篇文章添加书签，但到目前为止还没有成功

下面是我正在使用的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;
});
});

你能帮我解决这个问题吗

---

非常感谢

一种方法是在

$.post（）

之前向链接添加一个

.disabled

类

---

感谢羊皮纸提供了这个解决方案！在你的帮助下，这段代码可以完美地工作，但我觉得目前的行为并不十分友好。目前，在应用解决方案后，它允许用户单击一次添加书签，然后再次单击删除书签，但在这之后，第三次单击会使页面跳转到顶部，这会让许多用户感到困惑。您能帮我一下吗？这样，我就可以让用户添加/删除书签任意次数，而不必在第三次单击时点击跳跃，并且仍然能够阻止多个ajax帖子？谢谢@AvinashSingh您可能应该用

return false

替换那里的

return

。但是，这意味着有一种情况，

.disabled

类不会被删除。我认为您可能需要在第一个

$.post（）中的
if（$（...length>）
语句中添加
else{$（that）.removeClass…}
。非常感谢，羊皮纸！你是个救生员！
// 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');