Call from AJAX generated control not working in my page

Question

In a real stalemate here, and give up...can anyone help?

Here is a sample of some AJAX generated HTML code:

<div class='input-group date form_datetime col-sm-6' data-link-field='stime'>
  <input type='text' readonly name='stime' class='form-control' style='width:220;' value='" & rs("time") & "'>
  <span class='input-group-addon'><span class='glyphicon glyphicon-remove'></span></span>
  <span class='input-group-addon'><span class='glyphicon glyphicon-calendar' tabindex='3'></span></span>
</div>

..here is my call from the generated HTML above to JQuery on the original page...

<script type="text/javascript">
  $('.form_datetime').on 'focus', $(this).datetimepicker({
    weekStart: 1,
    todayBtn:  1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 2,
        forceParse: 0,
    showMeridian: 1,
    format: 'mm/dd/yyyy HH:ii P',
    startDate: new Date
  });
</script>

...and here is my call for the data...

function loadSlot(id) {
  var xmlhttp;    
  if (window.XMLHttpRequest) {
    xmlhttp=new XMLHttpRequest();
  } else {
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
      document.getElementById("dataSlot").innerHTML=xmlhttp.responseText;
    }
  }
  xmlhttp.open("GET","getslots.asp?id="+id,true);
  xmlhttp.send();
}

I click the record, it loads the data correctly into my page, one of the fields is a datetime field, I click on the button to throw the datetimepicker, and...nothing....BUT - any datetimepicker that is loaded directly on my original page works fine.

Any ideas?

PS - If you haven't guessed, I'm new to AJAX.... :)

Thank You in advance!

Answer 1

Delegate the event so that newly appended elements get the event bound:

<script type="text/javascript">
 $(document).on('focus', '.form_datetime', function () {
    $(this).datetimepicker({
        weekStart: 1,
        todayBtn: 1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 2,
        forceParse: 0,
        showMeridian: 1,
        format: 'mm/dd/yyyy HH:ii P',
        startDate: new Date
    });
 });
</script>