javascript - bootstrap uncaught typeError : $(. ..).timepicker 不是一个函数

Question

我已经研究这个问题一周了，但是作为 Bootstrap 的新手，我无法找到解决方案。

我有一个表单，它工作得很好，除了当我运行函数 addItem();

一旦我这样做，它就不会显示日期选择器或时间选择器。这组项目工作正常:

                <div class="form-group">
                <div class="row">


                    <div id="servicetime" class="col-sm-6 col-md-6">
                        <h4>Date In</h4>
                        <div class="input-group"> 


                            <input id="date_in_1" name="date_in_1" type="text" class="date start form-control">
                            <span class="input-group-addon"><?if($requiredfield=="Yes") echo '<i class="glyphicon glyphicon-ok form-control-feedback"></i>';?></span>

                        </div>
                        <h4>Time In</h4>
                        <div class="input-group"> 
                            <input id="time_in_1" name="time_in_1" type="text" class="time start form-control">
                            <span class="input-group-addon"><?if($requiredfield=="Yes") echo '<i class="glyphicon glyphicon-ok form-control-feedback"></i>';?></span>
                        </div>  
                        <h4>Time Out</h4>
                        <div class="input-group"> 
                            <input id="time_out_1" name="time_out_1" type="text" class="time end form-control">
                            <span class="input-group-addon"><?if($requiredfield=="Yes") echo '<i class="glyphicon glyphicon-ok form-control-feedback"></i>';?></span>
                        </div> 

                        <div style="display:none" class="input-group"> 
                            <input id="date_out_1" name="date_out_1" type="text" class="date end form-control" readonly>
                            <span class="input-group-addon"><?if($requiredfield=="Yes") echo '<i class="glyphicon glyphicon-ok form-control-feedback"></i>';?></span>
                        </div>

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

            <script>
                // initialize input widgets first
                $('#time_in_1').timepicker({
                    'showDuration': true,
                    'timeFormat': 'g:ia',
                    'step': 15
                });

                $('#date_in_1').datepicker({
                    'format': 'm/d/yyyy',
                    'autoclose': true
                });
                $('#time_out_1').timepicker({
                    'showDuration': true,
                    'timeFormat': 'g:ia',
                    'step': 15
                });

                $('#date_out_1').datepicker({
                    'format': 'm/d/yyyy',
                    'autoclose': true
                });

                // initialize datepair
                var basicExampleEl = document.getElementById('servicetime');
                var datepair = new Datepair(basicExampleEl);



            </script>
            <div class="row">
                <div class="col-md-6">

                    <div class="form-group">
                        <label for="children_1"># of Children:</label>
                        <div class="input-group">
                            <input type="number" class="form-control" name="children_1" min="1" max="5" id="children_1" placeholder="#" required >
                            <span class="input-group-addon"><i class="glyphicon glyphicon-ok form-control-feedback"></i></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div id="itemDiv"></div>

        <div> <a class="btn btn-primary" href="javascript:addItem()"><i>Different amount of kids for different amounts of hours then add more time frames.</i></a></div>

运行此函数后，我收到上述错误。

function addItem() 
{


    var numberOfItems = Number($('#entry_count').val()) + 1;
    $('#entry_count').val(numberOfItems);
    var sTextToAdd = '<div class="form-group"><div class="row"><div id="servicetime'+numberOfItems+'" class="col-sm-6 col-md-6"><h4>Date In</h4><div class="input-group">';
    sTextToAdd +=  '<input id="date_in_'+numberOfItems+'" name="date_in_'+numberOfItems+'" type="text" class="date start form-control">';
    sTextToAdd += '<span class="input-group-addon"><i class="glyphicon glyphicon-ok form-control-feedback"></i></span> </div>';
    sTextToAdd += '<h4>Time In</h4> <div class="input-group">  <input id="time_in_'+numberOfItems+'" name="time_in_'+numberOfItems+'" type="text" class="time start form-control">';
    sTextToAdd += '<span class="input-group-addon"><i class="glyphicon glyphicon-ok form-control-feedback"></i></span></div>';
    sTextToAdd += '<h4>Time Out</h4><div class="input-group"><input id="time_out_'+numberOfItems+'" name="time_out_'+numberOfItems+'" type="text" class="time end form-control">';
    sTextToAdd += '<span class="input-group-addon"><i class="glyphicon glyphicon-ok form-control-feedback"></i></span></div>';
    sTextToAdd += '<div style="display:none" class="input-group"><input id="date_out_'+numberOfItems+'" name="date_out_'+numberOfItems+'" type="text" class="date end form-control" readonly>';
    sTextToAdd += '<span class="input-group-addon"><i class="glyphicon glyphicon-ok form-control-feedback"></i></span></div></div></div></div>';
    sTextToAdd += '<br />'; 
    $('#itemDiv').append(sTextToAdd);
    // initialize input widgets first
    $('#time_in_'+numberOfItems).timepicker({
        'showDuration': true,
        'timeFormat': 'g:ia',
        'step': 15
    });
    $('#date_in_'+numberOfItems).datepicker({
        'format': 'm/d/yyyy',
        'autoclose': true
    });
    $('#time_out_'+numberOfItems).timepicker({
        'showDuration': true,
        'timeFormat': 'g:ia',
        'step': 15
    });
    $('#date_out_'+numberOfItems).datepicker({
        'format': 'm/d/yyyy',
        'autoclose': true
    });
    $('#time_in_'+numberOfItems).ptTimeSelect();
      $('#time_out_'+numberOfItems).ptTimeSelect();


    var basicExampleEl = document.getElementById('servicetime_'+numberOfItems);
    var datepair = new Datepair(basicExampleEl);
}

我尝试在页面末尾运行该函数的脚本，但只有在插入输入后才能加载该脚本。我想过做一个 for 循环，并在页面加载时在脚本之前添加功能项，然后使用按钮从 style="display:none;"显示它们，但我觉得这样很草率。

我尝试了列出的解决方案 here但这也不起作用。

任何有关此问题的帮助将不胜感激。

Answer 1

您的 bootstrap timepicker 或 datepicker js 文件应位于页脚中，jquery min.js 位于 header 中

在标题中:

<script src="/js/jquery-1.11.1.min.js"></script>

在页脚中:

<script src="/js/bootstrap.min.js"></script>
<script src="/js/bootstrap-timepicker.min.js"></script>

如果有帮助，请尝试这样做。