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;」，但我覺得它很sl。。

我試過列出的解決方案here，但那也沒用。

任何幫助，這將不勝感激。

Answer 1

你引導timepicker或日期選擇器JS文件應該在頁腳和jQuery min.js在頭

在標題：

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

嘗試這樣做，如果它有助於。