jQuery验证插件-委托表单提交事件未触发 $（“表单”）。验证({ submitHandler:函数（表单）{ 表单提交（）； } }); $（文档）。关于（“提交”、“表格”和“函数”）{ 警报（“提交”）； });

• 为什么警报从未被触发
• 我怎样才能让它工作

---

更新：

有趣的是，这是有效的：

$("form").on("submit", function() {
    alert("does work");
});

@斯帕克：

---

我正在开发一个废弃页面对话框插件。因此，需要列出页面上所有表单的实际表单提交（带或不带验证程序）。这些表单也可以异步加载。我认为美元（文件）。关于（“提交”，“形式”，功能）；似乎是要侦听的正确事件。

由于您使用了

子mthandler

选项，验证程序框架将阻止默认操作并停止事件传播，这就是委派提交处理程序无法工作的原因

因此，一个可能的解决方案是不使用提交处理程序

$（“表单”）.validate（{}）；
$（文档）。关于（“提交”、“表格”和“函数”）{
警报（“提交”）；
});



提交
更改

            <button type="submit" class="btn">Submit</button>

提交

到


正在工作

删除
子mthandler

$("form").validate({});
$(document).on("submit", "form", function () {
    alert("submit");
});

没有理由同时使用插件提供的
submitHandler
回调函数和外部
submit
事件处理程序。无论您在做什么，都可以轻松地包含在这两个处理程序中。（您还没有解释使用这些处理程序最终要实现的目标。）


引用OP：

“为什么警报从未被触发？”

submitHandler
回调函数阻止表单的默认
submit
事件，因此，例如，您可以使用
ajax
。这就是为什么您的外部
submit
事件处理程序从不触发的原因

在您的例子中，
submitHandler
回调是完全多余的，因为其中包含的代码恰好也是插件的默认

submitHandler: function(form) {
    form.submit(); // this is the default
}

您可以删除上面的选项，然后启动自定义事件处理程序。但是，在使用此插件时，在提交事件时触发一些代码并不一定是最正确的方法


引用OP：

“我怎样才能使它工作？”

无论您计划如何使用此外部
submit
事件处理程序，我建议您使用提供的
submitHandler
回调方法来处理它。（这就是为什么您可以使用它。）

这是应该怎么做的

$("form").validate({
    submitHandler: function(form) {
        alert("submit");
        form.submit();
    }
});

（在使用
.ajax（）
提交表单的情况下，您需要删除
表单.submit（）
行，并将其替换为
返回false
）


$（“表单”）。验证({
submitHandler:函数（表单）{
警报（“提交”）；
表单提交（）；
}
});



提交
如果我们希望委托动态表单并与验证插件一起使用，我的工作解决方案：


$（“#父项”）。关于（'submit'，'#child'，函数（e）{
e、 预防默认值（）
$（此）。验证({
规则：{
//验证规则
},
submitHandler:函数（表单）{
//做ajax调用
}
})
$（this.submit（））
})
请不要仅依靠JSFIDLE向我们显示相关的HTML标记。。该插件与
type=“submit”
同样适用，即使它是
按钮
元素；而
值
属性只会更改按钮的标签，默认情况下按钮已经是
Submit
。您拼写错误了
submitHandler
。为什么建议删除
submitHandler
，而使用外部
submit
事件处理程序？解决此问题的方法是简单地将
警报
移动到
submitHandler
中，然后删除外部事件处理程序。
$("form").validate({
    submitHandler: function(form) {
        alert("submit");
        form.submit();
    }
});