引导带时钟选择器（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不是函数）

回答

相关问题