0

私はajaxに取り組んでいます。
ブラウザはグーグルクロームです。
送信をクリックしたときにOKを警告する代わりに、ブラウザがフォームを送信します。ここで何が問題なのですか？

    <html>
    <head>
    <script type="text/javascript" src="/cp/scripts/jquery-1.7.2.js"></script>
    <script language="javascript">
    $("#test").submit(function(){
    //$.post("test.php", this.serialize());
    alert('ok');
    return false;
    });
    </script>
    </head>
    <body>
    <form id="test">
    <input type="text" name="name">
    <input type="submit">
    </form>
    </body>
    </html>
4

2 に答える 2

8

スクリプトの実行時には、フォームはまだ定義されていません。$().readyイベントでラップします。

$(document).ready(function() {
    $("#test").submit(function() {
    //$.post("test.php", this.serialize());
    alert('ok');
    return false;
    });
});

次の質問が来るのがわかります:「定義されていないものは何ですか?」。
はい：

...
# Hey, a script tag, let's wait, and load the resource.
<script type="text/javascript" src="/cp/scripts/jquery-1.7.2.js"></script>

# Hey a script tag!
<script language="javascript">
$("#test").submit(function(){
//$.post("test.php", this.serialize());
alert('ok');
return false;
});
</script>
# The script block has ended, let's parse the script
# ... *calls* $('#test'). ....

# Now, #test is defined. Too late...
<form id="test">
# ...
于 2012-04-12T15:01:35.870 に答える
1

まず、関数が で実行されていることを確認してから、イベントdocument.readyの既定の動作を防止することを忘れないでください。submit

$(document).ready(function() {
    $("#test").submit(function(evt){
        evt.preventDefault();
        alert('ok');
        return false;
    });
});

Chrome のjsFiddleでテスト済み。

于 2012-04-12T15:07:36.187 に答える