引導帶時鐘選擇器（clockpicker不是函數）

我是一個初學者引導和jQuery，當我嘗試使用clockpicker包進行引導時，我遇到了這個錯誤。引導帶時鐘選擇器（clockpicker不是函數）

Uncaught TypeError：$（...）。clockpicker不是函數。

<html > 
<head> 
    <!-- Clockpicker and minified CSS --> 
    <link rel="stylesheet" href="clockpicker-gh-pages/dist/bootstrap-clockpicker.min.css"> 

    <!-- Latest compiled and minified CSS --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 

    <!-- Optional theme --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous"> 


    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

<title>Time Slot</title> 
</head> 
<body> 

    <div class="col-xs-12" style="height:100px;"></div> 
    <div class="container-fluid" > 
      <form role="form" name="frm" action ="timeslot" method="post" 
      onSubmit="return valid2()"> 

      <div class="form-group"> 
        <label for="name" >Slot Name</label> 
        <input type="text" name="slotname" class="form-control" placeholder="Time Slot name" > 
      </div> 
      <div class="form-group"> 
        <label for="name" >Time Slot</label> 
        <input type="text" name="slotname" class="form-control" placeholder="Time Slot name" > 
      </div> 
      <label for="name" >Time</label> 
      <div class="input-group clockpicker"> 
       <input type="text" class="form-control" value="09:30"> 
       <span class="input-group-addon"> 
        <span class="glyphicon glyphicon-time"></span> 
       </span> 
      </div> 


      <div class="col-xs-12" style="height:30px;"></div> 
      <div class="form-group"> 
        <button type="submit" class="btn btn-info" name="submit">SUBMIT</button> 
      </div> 
     </div> 
      </form> 

      <script type="text/javascript"> 
      $('.clockpicker').clockpicker() 
       .find('input').change(function(){ 
        // TODO: time changed 
        console.log(this.value); 
       }); 
      $('#demo-input').clockpicker({ 
       autoclose: true 
      }); 

      if (something) { 
       // Manual operations (after clockpicker is initialized). 
       $('#demo-input').clockpicker('show') // Or hide, remove ... 
         .clockpicker('toggleView', 'minutes'); 
      } 
      </script> 


</body> 
<!-- Latest compiled and minified JavaScript --> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 

    <script src="clockpicker-gh-pages/assets/js/bootstrap.min.js"></script> 
    <script src="clockpicker-gh-pages/assets/js/highlight.min.js"></script> 
    <script src="clockpicker-gh-pages/dist/jquery-clockpicker.min.js"></script> 

</html>

來源

2016-02-27 avinash v p

如果你看看你發佈的代碼，你會發現你正試圖運行 clockpicker clockpicker之前加載。

解決這個問題的最簡單的方法是使用一個jQuery document ready功能，這將導致你的腳本要等到整個頁面試圖運行之前加載：

// This line tells jQuery to wait until the whole page is loaded before running the code inside. 
// This will solve your current problem, as well as many other potential problems. 
jQuery(function($) { 
     $('.clockpicker').clockpicker() 
      .find('input').change(function(){ 
       // TODO: time changed 
       console.log(this.value); 
      }); 
     $('#demo-input').clockpicker({ 
      autoclose: true 
     }); 

     if (something) { 
      // Manual operations (after clockpicker is initialized). 
      $('#demo-input').clockpicker('show') // Or hide, remove ... 
        .clockpicker('toggleView', 'minutes'); 
     } 
// The line below "closes" the document ready function 
});

來源

2016-02-28 00:03:27

非常感謝它的工作... –

再次感謝@cale_b，我有一個關於上述代碼的問題，以防我使用動態clockpicker（clockpicker輸入在添加單擊按鈕時打開）如何使我的代碼工作。 –

發表你的代碼，打開輸入，讓我知道，我會編輯我的答案 - 但我需要看你的代碼這樣做 –

引導帶時鐘選擇器（clockpicker不是函數）

回答

相關問題