1

私は jQuery を初めて使用するので、このコードが機能しない理由についての説明を探しています。「アクション」がよくわからないものだと思います。誰かがここで私の間違いを理解するのを手伝ってくれますか? ありがとう

<script src="/jquery.validationEngine.js"></script>
<script>
    $("#contact_body").submit(function(e) {
        e.preventDefault(); // Prevents the page from refreshing

        var $this = $(this); // `this` refers to the current form element

        if ($("#contact_body").validationEngine('validate')) {
            //Post Data to Node Server
            $.post(
                $this.attr("action"), // Gets the URL to sent the post to
                $this.serialize(), // Serializes form data in standard format
                function(data) { /** code to handle response **/ },
                "json" // The format the response should be in
            );

            //Notify User That the Email Was Sent to the Server & Thanks!
            //$('#contactThanksModal').modal('show');
            $('#contactModal').modal('hide');
            alert("success"); 
        }
        else {
            //handle Invalid Email Format Error
            alert("error"); 
        }
    });
</script> 

<!--pop up contact form -->
<div id="contact" class="modal hide fade in" style="display: none;">
    <div class="modal-header">
        <a class="close" data-dismiss="modal">x</a>
        <h3>Send us a message</h3>
    </div>
    <div class="modal-body">

    <form id="contact_body"class="contact_body" name="contact_body" action="/contact">
        <label class="label" for="form_name">Your Name</label><br>
        <input type="text" name="form_name" id="form_name" class="input-xlarge"><br>

        <label class="label" for="form_email">Your E-mail</label><br>
        <input type="form_email" name="form_email" class="input-xlarge"><br>

        <label class="label" for="form_msg">Enter a Message</label><br>
        <textarea name="form_msg" class="input-xlarge"></textarea>
    </form>
</div>

<div class="modal-footer">
    <input class="btn btn-success" type="submit" value="Send!" id="submit">
    <a href="#" class="btn" data-dismiss="modal">Nah.</a>
</div>

<!-- <div id="thanks"><p><a data-toggle="modal" href="#contact" class="btn btn-primary btn-large">Modal powers, activate!</a></p></div> -->
4

2 に答える 2

0

コードをドキュメント対応ハンドラーに配置する必要があります。

<script src="/jquery.validationEngine.js"></script>
<script>
    $(function() {
        $("#contact_body").submit(function(e) {
            // your code...
        });
    });
</script>

submit()コードは現在、要素が DOM に存在する前にハンドラーを追加しようとしています。

于 2013-09-09T08:58:54.793 に答える
0

JQuery スクリプトを

$(document).ready(function() {
    ...your_code_here...
});

これは、ドキュメント全体がロードされるのを待ってから、イベントをオブジェクトに添付しようとします。

これがないと、まだ「作成」されていないオブジェクトにイベントをバインドしようとしている可能性があります。

于 2013-09-09T08:56:52.077 に答える