Предотвращение отправки нескольких форм

Question

Я представляю форму с использованием JQuery и прослушивателя событий, связанного с div (а не поле ввода), и я пытаюсь предотвратить несколько отправлений, поэтому клиент не получает переплату. Я пытаюсь выполнить это, удалив класс submit-button щелкнутого div, поэтому в следующий раз, когда пользователь нажмет на него, JQuery не будет прослушивать событие, связанное с submit-button, предотвращающим несколько отправлений.

Использование реализации ниже, однако, по какой-либо причине не предотвращает несколько отправлений, как предполагалось.

HTML

<div class="submit-button button-style">Submit</div> 

JQuery

$(".submit-button").click(function(){ 
    $(this).removeClass("submit-button"); 
    //**submit form** 
}); 

Примечание: Я должен придерживаться решений, которое использует HTML выше, поэтому растворы с использованием input элемента типа submit, не будет полезным.

Я ценю любые предложения о том, как это сделать. Спасибо заранее!

Answer 1

Вы можете использовать .one(), чтобы предотвратить его от стрельбы несколько раз -

$(".submit-button").one('click',function(){ 
    //**submit form** 
}); 

http://api.jquery.com/one/

Edit:

В случае ошибки:

function submitForm(){ 
    //**submit form** 
    $.post('submit.php').error(function(){ 
     // rebind event on error 
     $(".submit-button").one('click',submitForm); 
    }); 
} 
$(".submit-button").one('click',submitForm); 

Answer 2

Вы могли бы используйте что-то вроде:

$('something').one('click', function(){ 
    // submit code 
}); 

Которая будет стрелять только один раз.

Answer 3

Значительная часть пользователей не беспокоится о нажатии кнопки отправки, чтобы отправить форму - есть и другие более удобные способы, например, нажать клавишу ввода, когда фокус курсора находится в поле формы.

Более надежный подход состоит в том, чтобы заблокировать форму через событие отправки форм и сохранить переменную, чтобы отслеживать состояние отправки формы.

var submitted = false; 
$("form#myForm").submit(function(evt){ 
    if (submitted) { 
     evt.preventDefault();//stops form submission 
     return; 
    } 

    submitted = true; 
}); 

Я пропустил проверку формы для этого примера.