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

Question

我正在使用 Jquery 动态添加某些元素。 Bootstrap Datepicker 适用于页面加载时已存在的输入元素，但不适用于动态添加的元素。所以我尝试使用 Jquery 的 .on 函数。但是当我将日期选择器绑定代码放置在文档就绪中的任何位置时，出现以下错误。

错误：

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

无论你在哪里调用日期选择器函数，都可以像这样使用：-

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

Answer 2

我可以看到 2 种可能性

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

2：日期时间选择器 ID 不可用于 jquery

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

setTimeout(function(){ 

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

 }, 200);

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

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

Answer 3

您根本不应尝试在基于 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 是独一无二的。

使用 class (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 方法。我检查时间选择器是否在第一次点击时被初始化，如果没有，我初始化它并显示选择器。在任何其他情况下，我都会让 timepicker 代码通过提前返回来完成它的工作。

更新：JSFiddle Example

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

Bootstrap datetimepicker is not a function when used within document.ready

html

javascript

jquery

twitter-bootstrap

bootstrap-datepicker