在 document.ready 中使用时，Bootstrap datetimepicker 不是一个函数

Question

我使用 Jquery 动态添加了某些元素。 Bootstrap Datepicker 适用于页面加载时已经存在但不适用于动态添加的元素的输入元素。 所以我尝试使用 Jquery 的.on 函数。但是当我将 datepicker 绑定代码放在文档准备好的任何地方时，我收到以下错误。

错误：

Uncaught TypeError: $(...).datetimepicker is not a function

脚本

   <script type="text/javascript">
        $(document).ready(function () {
            $('body').on('click', 'div[id^="datetimepicker"]', function () {
                alert();

                $('div[id^="datetimepicker"]').datetimepicker({
                    useCurrent: false 
                });

            });
        });

</script>

更新：

这不适用于任何元素（datetimepicker 不是函数）：

   $('body').on('click', "div[id^='datetimepicker']", function () {
             console.log(this);
             $(this).datetimepicker({
                     useCurrent: false //Important! See issue #1075
                });
        });

这只适用于已经存在的元素：

$('#griddt').find('div[id^="datetimepicker"]').datetimepicker({
        useCurrent: false //Important! See issue #1075
    });

更新 2： （在第一个文本框内单击以添加新的网格行，在第二个文本框内单击以查看日历 - 仅在第一行内有效） https://jsfiddle.net/a8j30rcw/1/

Answer 1

您根本不应该尝试基于id 属性来监听日期时间选择器。 原因是在页面内动态添加元素可能会创建不止一次的日期时间选择器 w

$(document).ready(function() {
  $('.form-group').html(`<div class='datetimepicker input-group date'>
                    <input type='text' class="form-control" />
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>`);
});


$('body').on('click', '.datetimepicker', function() {
  var tp = $(this);
  if (tp.data().DateTimePicker) {
    return true;
  }
  tp.datetimepicker({
    useCurrent: false
  });
  tp.data().DateTimePicker.show();
});

/* Optional theme */

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css');
@import url(https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css')

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/master/build/js/bootstrap-datetimepicker.min.js"></script>
<div class="container">
  <div class="row">
    <div class='col-sm-6'>
      <div class="form-group">

      </div>
    </div>
  </div>
</div>

同样的id。再次强调id 必须是独一无二的。

使用一个类 (datetimepicker) 或一些 HTML data-attribute 然后监听它。由于该事件处理页面加载后添加的动态元素，因此您实际上根本不需要$(document).ready，尽管您可以添加它而不会产生任何副作用。

    $('body').on('click', '.datetimepicker', function(){
        var tp = $(this);
        if (tp.data().DateTimePicker) {
            return true;
        }
        tp.datetimepicker({useCurrent: false});
        tp.data().DateTimePicker.show();
    });

更新： 在click 上，您只需在每次点击时初始化选择器。从未触发过show 方法。我检查时间选择器是否在第一次点击期间被初始化，如果没有，我初始化它并显示选择器。在任何其他情况下，我都会通过提早返回来让时间选择器代码完成其工作。

更新：JSFiddle Example

Answer 2

我可以看到两种可能性

1：日期时间选择器脚本尚未加载，

2: datetimepicker id 不适用于 jquery

对于上述两种情况，您可以尝试超时，看看是否是问题

setTimeout(function(){ 

// call to datepicker 
    $('div[id^="datetimepicker"]').datetimepicker({
           useCurrent: false 
    });

 }, 200);

如果这不起作用，则意味着您有重复的 ID。而不是 id 使用 class 来引用您的元素

$('.datepickerclass').datetimepicker({
           useCurrent: false 
    });

Answer 3

无论你在哪里调用 datepicker 函数，都像这样使用：-

$('body').on('click',"#datetimepicker", function(){
    $(this).datetimepicker();
});

​