应该是jQuery的$(form).submit(); 不在表单标签内触发onSubmit？

Question

我有以下内容:

<script type="text/javascript">
function CancelFormButton(button) {
    $(button.form).submit();
}
</script>

<form onsubmit="alert('here');">
<input type="button" value="Cancel" onClick="CancelFormButton(this);" />
</form>

单击"取消"按钮时,不会触发表单标记中的onsubmit.

该行成功提交表单:$(button.form).submit();但跳过alert('here');表单标记中的onsubmit.

这是正确的还是我做错了什么？

顺便说一句,在这种情况下,我想要这个功能,但我只是想知道我是否会在触发onsubmit的浏览器中遇到问题.

Answer 1

对不起,误解了你的问题.

根据Javascript - 在调用form.submit()时捕获onsubmit:

我最近被问到:"当我使用javascript提交表单时,为什么form.onsubmit事件没有被触发？"

答案:当前浏览器不遵守html规范的这一部分.该事件仅在用户激活时触发 - 并且在代码激活时不触发.

(重点补充).

注意: "由用户激活"还包括点击提交按钮(可能包括输入键的默认提交行为,但我没有尝试过).我相信,如果您(使用代码)单击提交按钮,它也会被触发.

Answer 2

这项工作将解决@Cletus发现的问题.

function submitForm(form) {
    //get the form element's document to create the input control with
    //(this way will work across windows in IE8)
    var button = form.ownerDocument.createElement('input');
    //make sure it can't be seen/disrupts layout (even momentarily)
    button.style.display = 'none';
    //make it such that it will invoke submit if clicked
    button.type = 'submit';
    //append it and click it
    form.appendChild(button).click();
    //if it was prevented, make sure we don't get a build up of buttons
    form.removeChild(button);
}

适用于所有现代浏览器.
将在制表符/衍生的子窗口之间工作(是的,甚至在IE <9中).
在香草中!

只需将一个DOM引用传递给表单元素,它就会确保所有附加的侦听器,onsubmit和(如果当时没有阻止)最后提交表单.

Answer 3

我的简单解决方案：

$("form").children('input[type="submit"]').click();

对我来说是工作。

Answer 4

我想在某些情况下想要这种行为是合理的,但我认为不触发表单提交的代码应该(始终)是默认行为.假设您想要抓住表单的提交

$("form").submit(function(e){
    e.preventDefault();
});

然后对输入进行一些验证.如果代码可以触发提交处理程序,则永远不能包括

$("form").submit()

在这个处理程序中,因为它会导致无限循环(将调用SAME处理程序,阻止提交,验证和重新提交).您需要能够在提交处理程序内手动提交表单,而不会触发相同的处理程序.

我知道这并没有直接回答这个问题,但是这个页面上还有很多关于如何破解这个功能的其他答案,我觉得这需要指出(而且评论太长了).