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的解决方案，因此使用input类型的submit元素的解决方案将无用。

我很欣赏有关如何完成这项工作的任何建议。提前谢谢了！

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;
});

我省略了此示例的表单验证。

防止多个表单提交

3 个答案: