Question

我有一个div =＆＃34; yearbookorder＆＃34;它是隐藏的。点击事件后，彩色框会显示该年鉴订单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的问题？

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

jquery colorbox表单提交事件未触发

1 个答案: