2

私が話していることの実用的な例については、http：//jsfiddle.net/8KNc7/5/を参照してください（現在Firefox 15でテストしていますが、他の人は試していません）。

submit入力と入力の両方がフォームbuttonデータをサーバーに送信するフォームがありますが、入力のみがsubmitjQuery送信イベントを実行します。どうしてこれなの？

形：

<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');
    });
});

ポイントは、両方のボタンでアラートが発生することを期待していますが、発生するのは1つだけです。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 イベント「送信」がトリガーされるためです。

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();
});
于 2012-09-19T21:16:59.503 に答える
0

おそらく$('form').submit(...)、純粋な JavaScript ではなく jQuery であるためです。

理由が何であれ、JavaScript の を使用する代わりに、form.submit()jQuery の を使用して.trigger()ください。

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

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

于 2012-09-19T21:20:15.723 に答える