防止多种形式提交

Question

我正在使用JQuery和绑定到div（不是输入字段）的事件侦听器提交表单，并且试图防止多次提交，因此客户不会被多收。 我正在尝试通过删除单击的div的submit-button类来实现此目的，因此，下次用户单击它时，JQuery将不会侦听与与submit-button关联的事件，从而防止多次提交。

但是，出于某种原因，使用下面的实现并不会阻止多次提交。

HTML

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

jQuery查询

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

注意：我必须坚持使用上述html的解决方案，因此使用类型为submit的input元素的解决方案将无用。

感谢您提出有关如何进行这项工作的建议。 提前谢谢了！

Answer 1

您可以使用.one()来防止它多次触发-

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

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

编辑：

发生错误时：

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

很大一部分用户不必费心单击“提交”按钮即可提交表单-还有其他更方便的方法，例如当光标焦点位于表单字段上时按Enter键。

一种更可靠的方法是通过表单提交事件来阻止表单，并维护一个变量以跟踪表单提交状态。

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

    submitted = true;
});

在此示例中，我省略了表单验证。