title: Issue with JQuery libs no longer firing
body: <p>I did have this working, but I have changed things about to make things neater and it no longer works.  I have removed some code, but I have a page project.php which has the basic structure like so</p>
  
  <pre><code>&lt;?php include_once "templates/header.php"; ?&gt;
      &lt;div class="container-fluid"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-lg-2"&gt;
                  &lt;form role="form"&gt;
                      &lt;div class="form-group"&gt;
                          &lt;label&gt;Activity&lt;/label&gt;
                          &lt;select class="form-control" id="projectActionSelect"&gt;
                              &lt;option value=""&gt;Please select...&lt;/option&gt;
                              &lt;option value="addProject"&gt;Add Project&lt;/option&gt;
                          &lt;/select&gt;
                      &lt;/div&gt;
                  &lt;/form&gt;
              &lt;/div&gt;
              &lt;div class="col-lg-6" id="projectMainContainer"&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;?php include_once "templates/footer.php"; ?&gt;
  </code></pre>
  
  <p>header.php and footer.php basically does what you would expect them to do e.g. add my scripts.</p>
  
  <p>I then have a javascript file which handles things.  I thing it does is</p>
  
  <pre><code>$('#projectActionSelect').on('change', function (e) {
      if($(this).val() == 'addProject'){
          $.ajax({
              url: 'templates/project/addProject.php'
          }).done(function(data) {
              $('#projectMainContainer').append(data);
          });
      } else {
          $('#addProjectForm').remove();
      }
  });
  </code></pre>
  
  <p>So if the select is changed to Add Project, it attaches addProject.php which is basically a template containing a form.  I wont show it all, but it looks like the following</p>
  
  <pre><code>&lt;div id="addProjectForm"&gt;
      &lt;h2 class="main-header"&gt;Add Project&lt;/h2&gt;
  
      &lt;form class="form-horizontal" role="form" id="projectIdentified"&gt;
          &lt;div class="form-group"&gt;
              &lt;div class="col-sm-5 noPadding listLayout"&gt;
                  &lt;label for="startDate" class="col-sm-12 control-label green marginBottom10"&gt;WHEN&lt;/label&gt;
                  &lt;ul&gt;
                      &lt;li&gt;1. Does it start?&lt;/li&gt;
                      &lt;li&gt;2. Does it have to be delivered?&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
              &lt;div class="col-sm-7"&gt;
                  &lt;div id="false-height"&gt;&lt;/div&gt;
                  &lt;p&gt;&lt;span class="fixed-width"&gt;Start Date:&lt;/span&gt; &lt;input type="text" id="startDate"&gt;&lt;/p&gt;
                  &lt;p&gt;&lt;span class="fixed-width"&gt;Delivery Date:&lt;/span&gt; &lt;input type="text" id="deliveryDate"&gt;&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;button type="submit" class="btn btn-default" id="sbtBtnIdentified"&gt;Submit&lt;/button&gt;
      &lt;/form&gt;
  
      &lt;div class="result"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>So this all works fine, if I change the select the form is added to the page. </p>
  
  <p>This is where it gets strange. In the form thats added which I show above, there are two date fields.  In my javascript file I have</p>
  
  <pre><code>$( "#startDate" ).datepicker({
      changeMonth: true,
      changeYear: true,
      minDate: 0,
      dateFormat: 'dd-mm-yy',
      onSelect: function(selected) {
          var date = $(this).datepicker('getDate');
          if (date) {
              date.setDate(date.getDate());
          }
          $("#deliveryDate").datepicker("option","minDate", date);
      }
  });
  
  $( "#deliveryDate" ).datepicker({
      changeMonth: true,
      changeYear: true,
      minDate: 0,
      dateFormat: 'dd-mm-yy',
      onSelect: function(selected) {
          var date = $(this).datepicker('getDate');
          if (date) {
              date.setDate(date.getDate());
          }
          $("#startDate").datepicker("option","maxDate", date || 0);
      }
  });
  </code></pre>
  
  <p>But when I select the field nothing happens.</p>
  
  <p>I also have a validation method but if I click submit, no validation occurs and the page refreshes.  </p>
  
  <p>I can see my libraries are loaded so this does not seem to be the problem.</p>
  
  <p>The important thing to note is that this was all working fine the way I had it before, and this was done through hiding a showing the form.  This has only stopped working since I decided to load the form using ajax instead.</p>
  
  <p>Is there any reason why this would cause it to break?  If there is a reason, would be good to get an explanation so I can understand it fully.</p>
  
  <p>Thanks</p>