2

有关我正在谈论的工作示例，请参阅http://jsfiddle.net/8KNc7/5/ （现在在 Firefox 15 中进行测试，尚未尝试其他方法）。

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

形式：

<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功能以使其正常工作，但我试图弄清楚为什么其中一个有效而另一个无效的区别是什么。

4

3 回答 3

2

本机表单提交方法绕过了 jQuery 提交处理程序。您可以在多种情况下利用它来发挥自己的优势。

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

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

});
于 2012-09-19T21:49:18.393 回答
1

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

当用户尝试提交表单时，提交事件被发送到元素。它只能附加到元素上。<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();
});
于 2012-09-19T21:16:59.503 回答
0

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

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

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

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

于 2012-09-19T21:20:15.723 回答