Bootstrap 3 datetimepicker 在 ajax 获取容器后不触发

Question

我正在使用 bootstrap 3 datetimepicker 组件。我正在使用构造：

$('.datetimepickerbutton').datetimepicker({
    format: 'DD.MM.YYYY'
});

它工作正常，直到我将通过 ajax 发送内容。 Ajax 表单位于 .myDate div 内，它是目标 ID。我应该如何使用 jquery 的 "on" 方法让我的代码也适用于 ajax？我试过使用：

$(".dataPoczatku").on("load", function () {
    $('.datetimepickerbutton').datetimepicker({
        format: 'DD.MM.YYYY'
    });
});

但现在我的日期时间选择器从未显示....

我的问题看起来与主题类似，但我所有的脱衣舞链接都在头上，在这种情况下没有帮助。

Answer 1

ajax 成功后为什么不初始化日期选择器。像下面的例子：

$.ajax({
  url: "test.html",
  context: document.body
}).done(function() {//success function now you can initialize datepicker
  $('.datetimepickerbutton').datetimepicker({
    format: 'DD.MM.YYYY'
  });
});

如果您的 ajax 调用发生不止一次，那么您可能必须在初始化之前使用 $('.datetimepickerbutton').datetimepicker('remove');。我建议你使用 ID 而不是 Class(.datetimepickerbutton)，这样它只会影响特定的元素。

Answer 2

另一种调用方式：

var posting = $.post( url, data );
posting.done(function(output){
  $('#main-content').html(output).find('#datepicker').datepicker(datepickerOptions());
});

$('#main-content').load(this_file + ' #div' + this_id, {
  'id': this_id,
  'name': this_name
}, function(){
  $(this).find('#datepicker').datepicker(datepickerOptions())
});

function datepickerOptions() {
  var ToEndDate = new Date();
  return {
        todayBtn: true,
        orientation: "top left",
        autoclose: true,
        todayHighlight: true,
        endDate: ToEndDate,
      }
}

您可以对 'load' 或任何类型的 ajax 调用执行相同的操作。

我在显示日期选择器时遇到问题：仅在第二次单击时显示，即：当我获得焦点时。这工作正常。

感谢@Manwal 提供的解决方案，对我很有帮助。

Bootstrap 3 datetimepicker 在 ajax 获取容器后不触发

Bootstrap 3 datetimepicker doesn't trigger after container is get by ajax

jquery

ajax

twitter-bootstrap

datetimepicker