title: Send Form Using jQuery after form is generated using Ajax
body: <p>I am trying to build a one page booking system, I know php very well but struggling with jquery side of this.</p>
  
  <p>I know basics of jquery but I am no expert.</p>
  
  <p>Anyway I have built a booking system, when someone clicks a date it opens up a form which is created using php and pulled in using ajax.</p>
  
  <p>The problem I am having is sending this form after it has been pulled using ajax and then sending it through ajax to another page to be checked and then accepted or rejected depending on checks of the form submittion.</p>
  
  <p>Here is the html form which has been generated using php:</p>
  
  <pre><code>&lt;form id="bookingform" method="post"&gt;
  
  &lt;label class="bookinglabel" for="hour-9"&gt;9:00am - 10:00am&lt;/label&gt;
  
  &lt;select id="hour-9" name="hour-9" for="hour-9"&gt;
  
      &lt;option value="null"&gt;Please Select&lt;/option&gt;
      &lt;option value="1"&gt;Book A Slot For 1 Person&lt;/option&gt;
      &lt;option value="2"&gt;Book A Slot For 2 People&lt;/option&gt;
      &lt;option value="3"&gt;Book A Slot For 3 People&lt;/option&gt;
      &lt;option value="4"&gt;Book A Slot For 4 People&lt;/option&gt;
      &lt;option value="5"&gt;Book A Slot For 5 People&lt;/option&gt;
      &lt;option value="6"&gt;Book A Slot For 6 People&lt;/option&gt;
      &lt;option value="7"&gt;Book A Slot For 7 People&lt;/option&gt;
      &lt;option value="8"&gt;Book A Slot For 8 People&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;label class="bookinglabel" for="hour-10"&gt;10:00am - 11:00am&lt;/label&gt;
  
  &lt;select id="hour-10" name="hour-10" for="hour-10"&gt;
      &lt;option value="null"&gt;Please Select&lt;/option&gt;
      &lt;option value="1"&gt;Book A Slot For 1 Person&lt;/option&gt;
      &lt;option value="2"&gt;Book A Slot For 2 People&lt;/option&gt;
      &lt;option value="3"&gt;Book A Slot For 3 People&lt;/option&gt;
      &lt;option value="4"&gt;Book A Slot For 4 People&lt;/option&gt;
      &lt;option value="5"&gt;Book A Slot For 5 People&lt;/option&gt;
      &lt;option value="6"&gt;Book A Slot For 6 People&lt;/option&gt;
      &lt;option value="7"&gt;Book A Slot For 7 People&lt;/option&gt;
      &lt;option value="8"&gt;Book A Slot For 8 People&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;button type="submit" class="ajaxsubmit1"&gt;Proceed&lt;/button&gt;
  
  &lt;/form&gt;
  </code></pre>
  
  <p>Here is the jquery section to the form which originally calls in the date and then tries to submit the form.</p>
  
  <pre><code>jQuery(document).ready(function(){
  
      jQuery('.ajaxbooking').on('click', function(event){
  
          event.preventDefault();
  
          var selecteddate = jQuery(this).attr('data-date');
          var url = 'http://localhost:8888/booking.php';
          var winh = jQuery(window).height();
  
          jQuery.ajax({url: url  + '?date=' + selecteddate}).done(function(data) {
              jQuery('.ubl-booking-ajax').html(data);
              jQuery('.ubl-booking-ajax').animate({marginRight: "0px"}, 700 );
              jQuery('.ubl-portfolio-button').fadeIn(700);
          });
  
          return false;
  
      });
  
      jQuery('.ubl-portfolio-button').on('click',function(event){
  
          event.preventDefault();
  
          jQuery('.ubl-booking-ajax').animate({marginRight: "-100%"}, 700 );
          jQuery('.ubl-portfolio-button').fadeOut(300);
  
          return false;
  
      });
  
      jQuery("#bookingform").submit(function(e){
  
          e.preventDefault();
          alert('this has worked');
  
  
      });
  
  });
  </code></pre>
  
  <p>Obviously I am just alerted to see if it works, which it does not.</p>
  
  <p>Can anyone point me in the right direction</p>
  
  <p>Thanks</p>