Question

请参阅http://jsfiddle.net/8KNc7/5/以获取我正在谈论的实例（在Firefox 15中进行测试，未尝试过其他人）。

我有一个带有submit输入和button输入的表单，它们都将表单数据提交给服务器，但只有submit输入才会运行jQuery submit事件。这是为什么？

形式：

<form action='/echo/html/' method='post' id='Form' name='Form'>
    <input type='hidden' value='posted' id='html' name='html'>
    <input type='submit' id='submit1' value='submit type'>
    <input type='button' id='submit2' value='button type' onclick='submitForm();'>
</form>

Javascript（在body标签的末尾运行）：

var theForm = document.forms['Form'];
if (!theForm) {
    theForm = document.Form;
}
function submitForm() {
    theForm.submit();
}

$(function () {
    $('form').submit(function () {
        alert('ok');
    });
});

重点是，我期待两个按钮都能引发警报，但只有一个按钮会发出警报。我知道我可以提交更改submitForm函数以使其正常工作，但我想弄清楚为什么其中一个工作而另一个工作没有区别。

Answer 1

本机表单提交方法绕过jQuery提交处理程序。在几种情况下，您可以使用此功能。

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

    // validation
    if (valid(this)) {
        this.submit(); // submit form, bypassing jQuery bound submit handler
    }

});

Answer 2

这是因为jQuery事件'submit'仅在提交类型按钮提交表单时触发。

当用户尝试时，提交事件将发送到元素提交表格。它只能附加到元素。可以通过单击显式提交表单 <input type="submit">，<input type="image">或<button type="submit">，或按Enter键某些形式元素具有焦点。

取自http://api.jquery.com/submit/

一种方法是代替你的onClick事件和另一个按钮的JS函数添加一个jQuery click（）事件处理程序：

$('#submit1').click(function(){
   alert('Ok');
   $('#Form').submit();
});

Answer 3

可能是因为$('form').submit(...)是jQuery，而不是纯JavaScript。

无论是什么原因，使用jQuery的form.submit()而不是使用JavaScript的.trigger()：

function submitForm() { 
    $(theForm).trigger('submit');
}

http://jsfiddle.net/8KNc7/6/

为什么不通过表单元素上的submit方法提交表单调用$ .submit处理程序？

3 个答案: