在ajax调用之后创建表单后,Jquery表单提交不起作用

时间:2014-07-20 10:28:05

标签: jquery forms

以下代码提交表单并从服务器接收respose中的第二个表单的代码。然后将其显示在另一个灯箱中。这可以正常工作:

//submit our optin form when we are using a custom button..
$(".ajax-submit-landing-page-optin-form").click(function (e) {

//close the current lightbox..
$.fancybox.close(); 

//open a new one with a loading gif..
$.fancybox.open([{
    'type': 'inline',
    'content': '<div style="width:"300px;height:300px; class="center"><img src="https://valentte.s3.amazonaws.com/LoadingWheel.gif" style="width:150px;"></div>',
    'closeBtn' : false
}]);

e.preventDefault();
var formID = $(this).attr('href');

$.ajax({
    type: "POST",
    url: '/competitions/enter/<?=(isset($competiton->competition_id)) ? $competiton->competition_id : "";?>',
    data: $(formID).serialize(), // serializes the form's elements.
    dataType:'json',
    success: function(data)
            {
            if(data.result == 'success'){

                //close the current lightbox..
                $.fancybox.close(); 

                //open a new one with some different content..
                $.fancybox.open([{
                    'type': 'inline',
                    'content': data.lightbox_content,
                    'closeBtn' : false
                }]);



                                } else {



                                }                     
                           }
                         });



                });                                     

如果我使用简单的&#34;提交&#34;第二种形式显示在灯箱中并正确提交按钮。如果我尝试使用jquery提交表单没有任何反应。任何帮助将不胜感激......

相关的jquery是:

                //submit our optin form when we are using a custom button..
                $(".submit-form-with-image-button").on('click', function(e) {

                    e.preventDefault();
                    var formID = $(this).attr('href');
                    $('form'+formID).submit();
                }); 

插入dom的表单代码如下:

        <form action="/auth/create_user" method="post" class="validate-form-new-user-with-first-name form top-space20" style="padding-left:25px;" id="create-account-to-activate-voucher-form">

            <?php //echo validation_errors(); ?>

            <div class="form-field clear">
                <input type="hidden" value="<?=$client->email;?>" name="email" class="required promo-optin fl-space2 size-250" id="email">
                <input type="hidden" value="<?=(isset($client->community_member->first_name)) ? $client->community_member->first_name : '' ;?>" name="first_name" class="required promo-optin fl-space2 size-250" id="optin_first_name">
                <input type="hidden" id="signup_redirect" class="" name="signup_redirect" value="<?=(isset($competition->signup_redirect_url) && $competition->signup_redirect_url != '') ? $competition->signup_redirect_url : '/';?>"/>
                <input type="hidden" id="user_dc" class="" name="user_dc" value="<?=$competition->user_dc;?>"/>
                <input type="hidden" id="user_dc_reason" class="" name="user_dc_reason" value="<?=$competition->user_dc_reason;?>"/>
                <input type="hidden" id="single_use_promotion_code" class="" name="single_use_promotion_code" value="<?=$competition_entry[0]->promotion_code;?>"/>
            </div><!-- /.form-field -->                                 

            <div class="form-field clear bt-space10">
                <label for="textfield" class="size-200" style="position:relative;left:-20px;">Create Password (8-16 characters please) <span class="required">*</span></label>
                <input type="password" id="optin_password" class="required promo-optin fl-space2 size-250 active-input "  name="password" value="<?php //echo set_value('display_position', $landing_page_description->display_position);?>"/>
            </div><!-- /.form-field -->                             

            <div class="form-field" style="position:relative; top:30px; left:-22px;">
                <a class="btn btn-large btn-green center submit-form-with-image-button" style="" alt="Claim my voucher" href="#create-account-to-activate-voucher-form">
                    <span>Start Shopping</span>
                </a>
            </div><!-- /.form-field -->                                                                                             

        </form> 

任何帮助都会非常值得赞赏......

解决方案:

阅读此帖后Using Jquery, How do I submit a form that was created with AJAX?

我意识到我需要使用&#34; live&#34;而不是&#34; on&#34;如此受损的代码如下......

                //submit our optin form when we are using a custom button..
                $(".submit-form-with-image-button").live('click', function(e) {

                    e.preventDefault();
                    var formID = $(this).attr('href');
                    $('form'+formID).submit();
                });

1 个答案:

答案 0 :(得分:2)

试试这个$(document).on('submit','#yourFOrm',function(){})

所以在你的情况下

   $(".submit-form-with-image-button").on('click', function(e) {

     e.preventDefault();

     //and it should be id instead of href
     var formID = $(this).attr('id');
     $(document).on('submit','form#'+formID,function(){

    // do whatever
    })

 });