I usually use CSS classes to control AJAX requests affecting a specific element. This way you can prevent unwanted AJAX requests on that element, while other AJAX requests may still be triggered, being bound to other elements.
$('.slot').on('click', 'a.book', function(e) {
e.preventDefault();
// Check if doing ajax
if($(this).hasClass("doing-ajax")) return false;
$(this).addClass("doing-ajax");
var user = $('#rjb_day').attr( 'data-user' );
var stamp = $(this).attr( 'data-timestamp' );
// console.log(bookCap);
$(this).removeClass('book').addClass('booked');
$.ajax({
context: $(this),
type: 'POST',
url: ajax_object.ajaxurl,
data: {
action: 'rjb_make_diary_slots',
user: user,
stamp: stamp
},
success: function(data) {
// This outputs the result of the ajax request
console.log(data);
// Remove "doing-ajax" class
$(this).removeClass("doing-ajax");
},
error: function(errorThrown){
console.log(errorThrown);
// Remove "doing-ajax" class
$(this).removeClass("doing-ajax");
}
});
});
Don’t forget to add the context
property to your AJAX’s config object, as i did in the above example.