我是bootstrap和jquery的初学者，当我尝试将clockpicker包用于bootstrap时，遇到了此错误。
未捕获的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>
最佳答案
如果查看发布的代码，您会发现您正在尝试在加载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
});