1

フォームのボタンがクリックされたときにサーバーにJSONリクエストを送信するフォームを作成しようとしています。デフォルトのフォームの動作を無効にして、ボタンをクリックするとメールアドレスを送信できるようにします。サーバーからフォームにメッセージを返す（エラーの場合）か、フォームを成功メッセージに置き換える（成功した場合）という考え方です。

これは私がこれまでに持っているものです（スニペット）：

<div>
    <br />
    <div class="row">
        <div id="invite-member">
            <p>Enter your email:</p>
            <div class="no-show error-msg"></div>
            <form id="frm-invite" method="post" autocomplete="off" action='www.example.com/backend.php' accept-charset="UTF-8">
                <div class="input-append">
                    <input type="text" placeholder="Enter Email" class="input-long">
                    <button id="btn-invite" class="btn btn-primary btn-success" type="submit">Add me »</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script type="text/javascript">
$(document).ready(function(){
    $("#btn-invite").click(function(e){
        alert('Woohoo');
        e.stopPropagation();
    });
});
</script>

ページが最初に読み込まれるとき、ボタンは期待どおりに動作します。その後（ページをリロードせずに）、イベントバインディングが「壊れている」ようで、ブラウザはwww.example.com/backend.phpにアクセスしたいと考えています。

何故ですか？。

4

3 に答える 3

1

フォームのボタンがクリックされたときに JSON リクエストをサーバーに送信するフォームを作成しようとしています。

その場合、フォーム送信へのバインディングは、ボタンのクリックを妨げてフォームを送信する他の手段を防止するのに適している場合があります。

$(document).ready(function(){
    $("form").on("submit", function(e){
        $.ajax({
         // do you thing...
        });

        return false;
    });
});

on()は jQuery 1.7 以降でのみ使用できます。1.7 より前のバージョンの jQuery を使用している場合は、 bind()に置き換えて

また、 はとreturn false;の両方に等しいことに注意してください。event.preventDefault();event.stopPropagation();

于 2012-11-28T17:19:00.883 に答える
0

preventDefaultの代わりに使用する必要がありますstopPropagation。

ここに例があります。

于 2012-11-28T17:11:32.530 に答える
0

e.preventDefault() を使用して、ボタンの通常の動作を停止します

$(document).ready(function(){
    $("#btn-invite").click(function(e){
    e.preventDefault();        

    //do ajax


    });
});
于 2012-11-28T17:12:13.180 に答える