javascript - 无法在第一次点击事件时提交表单

Question

好吧，我在这个问题上花了几个小时，扫描了整个 stackoverflow，但仍然不知道该怎么做。但真正让我抓狂的是，如此微不足道、世界上最简单的事情是行不通的。所以，我现在拥有的是一个带有输入和按钮的表单:

<form id="frm" action="/accent/login/enter/">
    {% csrf_token %}
    <div draggable="true" id="panel" class="panel" title="">
        <input id="login" name="login" type="text" placeholder="" class="required" /> <br/>
        <input id="pswd" name="pswd" type="password" placeholder="" class="required"  /> <br/>
        <button id="btn" value="">ENTER</button>            
    </div>
</form>

我有这段代码应该发送表单:

$('#btn').one("click",function(){  // prevent from multiple submits
    $('#frm').validate({ // validate the form before submission
        ...general stuff: rules, messages, etc
        submitHandler:function(form){
            $('#frm').submit(function(e){ //submitted on the second click. why???
                ...prepare parameters for ajax call
                $.ajax({
                    type:'POST',
                    ...general stuff
                });
                e.preventDefault();
            })
        }
    });
});

问题是，当用户第一次点击提交按钮时，表单没有提交，但是，如果他或她第二次点击它，则提交成功。我无法理解在 jquery 中实现的这种行为背后的逻辑。此外，我应该说，我已经尝试了许多其他技巧，例如:

form.submit(...
$('#frm')[0].submit(...

但它们没有按预期工作，好像没有回调函数 - 我被重定向到 url，但没有停留在同一页面上 - 正是我对 e.preventDefault 的期望.我想 jquery 中有一些神圣的方法或神奇的属性，我应该使用它们来使其工作(比如方法 one 可以防止可怕的多次提交)。但此刻我不认识他们。

编辑

我也试过这个技巧:

jQuery('#frm').submit(...

但它的工作原理与第一种方法完全一样 - $('#frm').submit(...

编辑

我发现了第三种方法，它的工作原理与前一种相同:

$('form').submit(...

总而言之，我有三种不同的方法，但它们都只有在用户第二次单击按钮时才会起作用。我有两种以标准方式工作的方法，无法使用回调函数。

Answer 1

问题是，您在表单验证后注册表单提交。

所以，
1) 第一次点击按钮验证时，提交事件被注册到处理程序。
2) 第二次单击按钮时，将调用已注册的处理程序。这就是为什么它会在第二次点击时提交。但请注意，您正在重新注册提交事件。这意味着，第三次点击表单将提交两次，第四次点击表单将提交三次......等等......

解决方案
1) 从 submitHandler 中移除 $("#frm").submit() 代码并将其放在外面。
2) 在 $("#frm").submit() 中使用 e.preventDefault(); 以阻止默认操作并且页面不会重新加载。< br/>3)将AJAX代码直接放在submitHandler

中

$('#btn').one("click",function(){  // prevent from multiple submits
    $('#frm').validate({ // validate the form before submission
        ...general stuff: rules, messages, etc
        submitHandler:function(form){
            ...prepare parameters for ajax call
            $.ajax({
                type:'POST',
                ...general stuff
            });
        }
    });
});

$('#frm').submit(function (e) {

    e.preventDefault();
});