TypeError: $(...).carousel 不是函数
Posted
技术标签:
【中文标题】TypeError: $(...).carousel 不是函数【英文标题】：TypeError: $(...).carousel is not a function 【发布时间】：2015-08-30 19:57:36 【问题描述】：我知道很多问题都提出了这个问题，但是最常见的 jQuery 未加载的答案对我不起作用。看来我的 jQuery 正在正确加载（版本 1.10.2）。
我正在尝试运行以下代码（即使在控制台中也尝试过，因此不会存在加载问题）：
$('.carousel').on('mouseenter',function() $( this ).carousel();)
引导轮播本身运行良好。只是当我试图动态初始化它时，它不起作用。 （我刚开始使用角度和引导程序，所以我可能在这里遗漏了一些非常简单的东西。） 我正在为我的应用程序使用 angular js 和 bootstrap。
编辑： 这是我的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" class="img-responsive product-image"/>
</div>
<div class="item">
<img src="item.nutrition_thumbnail" 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>
角度代码：
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;
);
);
我使用 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"
【问题讨论】：
在这里看到你的 JS 代码会有很大帮助。 如果没有加载 jQuery，那么会在$ 上抛出一个引用错误。它说carousel 不是一个函数。你在哪里定义carousel？
您的浏览器控制台中有什么，有什么错误吗？你在加载 Bootstrap js 文件之前加载了 jQuery 吗？
.carousel 不是函数！使用$(this).slick();slick
分享angularjs代码
【参考方案1】：
我有同样的问题，我缺少的是在我的index.html 中包含bootstrap.js，并且在添加之后它起作用了。
<script type="text/javascript" src="components/bootstrap/dist/js/bootstrap.js"></script>
【讨论】：
【参考方案2】：您只需将您的脚本设置在 html 正文的底部。
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--JQUERY-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!--Boostrap carousel-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body>
<!--YOUR CAROUSEL BODY HERE-->
<h1>Look on the code example</h1>
</body>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script>
$(document).ready(function()
$('.carousel').carousel(
interval: 550 * 10
);
);
</script>
</html>【讨论】：
【参考方案3】：尝试更改具有 materialize.js 的标签的顺序，它对我有用！
具体来说，你应该保持源代码中脚本的这个顺序：
<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>
而不是相反。
【讨论】：
怎么改？以前是什么样子的，现在又是什么样子的？请edit您的回答以添加更多详细信息。 尝试在源代码<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>中保持这个脚本顺序
而不是相反！以上是关于TypeError: $(...).carousel 不是函数的主要内容，如果未能解决你的问题，请参考以下文章