Die Schaltfläche jQuery registriert sofort mehrere Klicks ⇐ Jquery

[Anonymous]

Ich habe eine Schaltfläche in meinem Formular, mit der prüfen soll, ob die Autorisierungsinformationen korrekt eingegeben wurden oder nicht. Dies geschieht, indem Sie einen Ajax -Anruf in einen Controller in meinem Ruby on Rails -Anwendung abfeuern und das Ergebnis überprüfen. Das Problem ist, dass selbst wenn ich nur einmal auf die Schaltfläche klicke, es sofort mehrere Klicks registriert - manchmal bis zu 5! - und feuert, den Ajax mehrmals aufruft, wodurch ich auch die API trifft, die ich auch mehrmals überprüfe. Hier ist, was ich in meiner html.erb-Datei habe: < /p>


$( document ).on('turbolinks:load', function() {
var $form = $("form");
var $buttons = $('#soap-access, #rest-access, #email-access, #audview-access', $form);
var $jobSchedule = $('#client_job_schedule', $form);

$buttons.click(function (e) {
var $button = $(this);
$button.prop('disabled', true);
var $parent = $button.parent();
var $spinner = $('.fa-sign-in', $parent);
var $signIn = $('.fa-spinner', $parent);
var $success = $('.fa-check', $parent);
var $error = $('.fa-times', $parent);

var data = {};
var $endpoint = '';

// add stuff to data

$signIn.toggleClass('d-none');
$spinner.toggleClass('d-none');
$success.addClass('d-none');
$error.addClass('d-none');

$.ajax({
type: "GET",
url: "",
data: data
})
.done(function () {
$success.removeClass('d-none');
})
.fail(function (jqXHR) {
$error.removeClass('d-none');
if (jqXHR.responseJSON && jqXHR.responseJSON.message) {
alert(jqXHR.responseJSON.message);
} else {
alert('Error trying to authenticate');
}
})
.always(function () {
$button.prop('disabled', false);
$spinner.toggleClass('d-none');
$signIn.toggleClass('d-none');
});
});
});


< /code>
Sie können sehen, dass ich die "deaktivierte" Requisite hinzufügen und sie am Ende entfernen. Die Schaltfläche ist in der Tat visuell deaktiviert, aber die zusätzlichen Klicks wurden bereits registriert und alle Ajax -Anrufe finden immer noch nacheinander statt.>