title: Jquery form submit not working after form is created after ajax call
body: <p>The following code submits a form and receives the code for a second form in respose from the server. Which is then displayed in another lightbox. This works correctly:</p>
  
  <pre><code>//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': '&lt;div style="width:"300px;height:300px; class="center"&gt;&lt;img src="https://valentte.s3.amazonaws.com/LoadingWheel.gif" style="width:150px;"&gt;&lt;/div&gt;',
      'closeBtn' : false
  }]);
  
  e.preventDefault();
  var formID = $(this).attr('href');
  
  $.ajax({
      type: "POST",
      url: '/competitions/enter/&lt;?=(isset($competiton-&gt;competition_id)) ? $competiton-&gt;competition_id : "";?&gt;',
      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 {
  
  
  
                                  }                     
                             }
                           });
  
  
  
                  });                                     
  </code></pre>
  
  <p>The second form is displayed in a lightbox and submits correctly if I use a simple "submit" button. Howver if i try to use jquery to submit the form nothing happens. Any help would be appreciated...</p>
  
  <p>relevant jquery is:</p>
  
  <pre><code>                //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();
                  }); 
  </code></pre>
  
  <p>Code for the form that gets inserted into the dom is as follows:</p>
  
  <pre><code>        &lt;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"&gt;
  
              &lt;?php //echo validation_errors(); ?&gt;
  
              &lt;div class="form-field clear"&gt;
                  &lt;input type="hidden" value="&lt;?=$client-&gt;email;?&gt;" name="email" class="required promo-optin fl-space2 size-250" id="email"&gt;
                  &lt;input type="hidden" value="&lt;?=(isset($client-&gt;community_member-&gt;first_name)) ? $client-&gt;community_member-&gt;first_name : '' ;?&gt;" name="first_name" class="required promo-optin fl-space2 size-250" id="optin_first_name"&gt;
                  &lt;input type="hidden" id="signup_redirect" class="" name="signup_redirect" value="&lt;?=(isset($competition-&gt;signup_redirect_url) &amp;&amp; $competition-&gt;signup_redirect_url != '') ? $competition-&gt;signup_redirect_url : '/';?&gt;"/&gt;
                  &lt;input type="hidden" id="user_dc" class="" name="user_dc" value="&lt;?=$competition-&gt;user_dc;?&gt;"/&gt;
                  &lt;input type="hidden" id="user_dc_reason" class="" name="user_dc_reason" value="&lt;?=$competition-&gt;user_dc_reason;?&gt;"/&gt;
                  &lt;input type="hidden" id="single_use_promotion_code" class="" name="single_use_promotion_code" value="&lt;?=$competition_entry[0]-&gt;promotion_code;?&gt;"/&gt;
              &lt;/div&gt;&lt;!-- /.form-field --&gt;                                 
  
              &lt;div class="form-field clear bt-space10"&gt;
                  &lt;label for="textfield" class="size-200" style="position:relative;left:-20px;"&gt;Create Password (8-16 characters please) &lt;span class="required"&gt;*&lt;/span&gt;&lt;/label&gt;
                  &lt;input type="password" id="optin_password" class="required promo-optin fl-space2 size-250 active-input "  name="password" value="&lt;?php //echo set_value('display_position', $landing_page_description-&gt;display_position);?&gt;"/&gt;
              &lt;/div&gt;&lt;!-- /.form-field --&gt;                             
  
              &lt;div class="form-field" style="position:relative; top:30px; left:-22px;"&gt;
                  &lt;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"&gt;
                      &lt;span&gt;Start Shopping&lt;/span&gt;
                  &lt;/a&gt;
              &lt;/div&gt;&lt;!-- /.form-field --&gt;                                                                                             
  
          &lt;/form&gt; 
  </code></pre>
  
  <p>Any help would be really appreciaated...</p>
  
  <p>SOLUTION:</p>
  
  <p>After reading this post <a href="https://stackoverflow.com/questions/3798862/using-jquery-how-do-i-submit-a-form-that-was-created-with-ajax?rq=1">Using Jquery, How do I submit a form that was created with AJAX?</a></p>
  
  <p>I realised that i need to use "live" instead of "on" so corrrcted code is below...</p>
  
  <pre><code>                //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();
                  });
  </code></pre>