javascript - TypeError: $(...).carousel is not a function -


i know has been asked in many questions, common answer jquery isn't loaded doesn't work me. seems jquery being loaded (version 1.10.2). trying run following code (tried in console, loading issue doesn't remain): $('.carousel').on('mouseenter',function(){ $( ).carousel();})

bootstrap carousel working fine. it's when trying initialize dynamically, it's not working. (i started angular , bootstrap, might missing simple here.) using angular js , bootstrap application.

edit: here's html code:

<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 take care of dependencies.

{  "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"  } } 

i had same issue, missing including bootstrap.js in index.html, , after adding following worked.

<script type="text/javascript" src="components/bootstrap/dist/js/bootstrap.js"></script> 

Comments

Popular posts from this blog

javascript - Google App Script ContentService downloadAsFile not working -

javascript - Function overwritting -

php - Find a regex to take part of Email -