2

id="yearbookorder" の div があり、非表示になっています。クリックイベントの後、カラーボックスがその yearbookorder ID DIV で表示されます。

その div のコードは次のとおりです。

<form id="yearbook_order" name="yearbook_order" action="yearbook/order" enctype="multipart/form-data" method="post">
    <input class="ordering" name="yb_email" value="" >
    <input type="submit" id="order" name="order" value="Send it!">
</form>

送信するjquery ajaxコードがありますが、フォーム送信イベントがトリガーされません:

$(function()
    {
        $("#yearbook_order").submit(function(e){
        e.preventDefault();
        dataString = $("#yearbook_order").serialize();   
        $.ajax({
            type: "POST",
            url: "yearbook/order",
            data: dataString,
            dataType: "json",
            success: function(data) 
            {
                if (data.status == 'error')
                {
                    alert(data.message);
                    //$("#msg").html(data.message);
                }
                else
                {
                    //$("#msg").html(data.message);
                    alert(data.message);
                }
            }  
            });               
        });
    });

送信ボタンをクリックしても、フォームが送信されません。しかし、なぜ？カラーボックスではなく空白のページでこのフォームを呼び出すと、機能しています。隠し年鑑のDIVに問題あり？

4

1 に答える 1

1 
You are binding submit to the form before it exists. Bind the event to the document, and pass the form selector to .on:

$(document).on("submit", "#yearbook_order", function(e){
    // make ajax request here
});
于 2013-03-22T13:23:14.497 に答える