来自 AJAX 的调用生成的控件在我的页面中不起作用

Question

陷入真正的僵局，放弃...有人能帮忙吗？

这是一些 AJAX 生成的 HTML 代码的示例：

<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>

..这是我从上面生成的 HTML 到原始页面上的 JQuery 的调用...

<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>

...这是我对数据的要求...

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();
}

我点击记录，它正确地将数据加载到我的页面中，其中一个字段是日期时间字段，我点击按钮以抛出日期时间选择器，然后......没有......但是 - 任何直接加载到我的原始页面上的 datetimepicker 工作正常。

有什么想法吗？

PS - 如果你没猜到，我是 AJAX 的新手...... :)

提前致谢！

Answer 1

委托事件以便新添加的元素得到事件绑定：

<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>

来自 AJAX 的调用生成的控件在我的页面中不起作用

Call from AJAX generated control not working in my page

html

javascript

ajax

jquery

bootstrap-datetimepicker