Javascript 类型错误：$(...).carousel 不是函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30843186/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
TypeError: $(...).carousel is not a function
提问by archangel
I know this has been asked in many questions, but the most common answer that jQuery isn't loaded doesn't work for me. It seems my jQuery is being loaded properly (version 1.10.2).
I am trying to run the following code (tried even in console, so the loading issue doesn't remain):
$('.carousel').on('mouseenter',function(){ $( this ).carousel();})
我知道很多问题都问过这个问题，但最常见的 jQuery 未加载的答案对我不起作用。似乎我的 jQuery 正在正确加载（版本 1.10.2）。我正在尝试运行以下代码（即使在控制台中也尝试过，因此加载问题不存在）：
$('.carousel').on('mouseenter',function(){ $( this ).carousel();})
Bootstrap carousel by itself is working fine. It's just when am trying to initialize it dynamically, it's not working. (I just started with angular and bootstrap, so I might be missing something very simple here.) I am using angular js and bootstrap for my application.
Bootstrap 轮播本身工作正常。只是当我尝试动态初始化它时，它不起作用。（我刚开始使用 angular 和 bootstrap，所以我可能在这里遗漏了一些非常简单的东西。）我正在为我的应用程序使用 angular js 和 bootstrap。
EDIT: Here's my html code:
编辑：这是我的 html 代码：
<div class="row" ng-controller="ItemGallery" style="padding-top:30px;">
<div class="col-md-4 item_card" ng-repeat="item in item_array">
<a href="{{'/product/id='+item.product_id}}" class="thumbnail">
<div id="{{'carousel_'+item.product_id}}" class="carousel slide" data-ride="carousel" data-interval="false">
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="{{item.thumbnail}}" alt="{{item.product_title}}" class="img-responsive product-image"/>
</div>
<div class="item">
<img src="{{item.nutrition_thumbnail}}" alt="{{item.product_title}}" class="img-responsive nutri-image"/>
</div>
</div>
</div>
<div class="caption post-content">
<h4 class="h_no_margin">
<p class="pull-left title">{{item.product_title.toLowerCase() }}</p>
<p class="text-right">${{item.price}}</p>
</h4>
<small>
{{item.product_desc}}
</small>
</div>
</a>
</div>
</div>
Angular code:
角度代码：
var app = angular.module('item_gallery', []);
app.controller('ItemGallery', function($http, $scope, $location) {
$http.get("/product/list")
.success(function(response) {
$scope.item_array = response.response;
});
});
I used bower to take care of dependencies.
我使用 bower 来处理依赖项。
{
"name": "nutrinext",
"version": "0.0.0",
"dependencies": {
"angular": "~1.3.1",
"angular-bootstrap": "~0.11.2",
"angular-timeago": "~0.1.3",
"angular-ui-router": "~0.2.11",
"ngstorage": "~0.3.0",
"bootstrap": "~3.3.0",
"bootstrap-markdown": "~2.7.0",
"jquery": "1.10.2",
"fastclick": "~1.0.3",
"fontawesome": "~4.2.0",
"pubnub": "~3.6.4"
},
"devDependencies": {},
"resolutions": {
"angular": "~1.3.1",
"bootstrap": "~3.3.0"
}
}
回答by Saurabh
I had the same issue, What I was missing was including bootstrap.jsin my index.html, and after adding following it worked.
我遇到了同样的问题，我缺少的是包含bootstrap.js在我的index.html.
<script type="text/javascript" src="components/bootstrap/dist/js/bootstrap.js"></script>
回答by udion
Try changing the order of the tags which has the materialize.js, it worked for me!
尝试更改具有 materialize.js 的标签的顺序，它对我有用！
Specifically, you should maintain this order of the scripts in the source code:
具体来说，您应该在源代码中保持脚本的这种顺序：
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
and not the other way around.
而不是相反。
