Question

我知道在许多问题中已经提到过这个问题，但是jQuery没有加载的最常见的答案对我来说不起作用。看来我的jQuery正在正确加载（版本1.10.2）。我试图运行以下代码（甚至在控制台中尝试，因此加载问题不会保留）： $('.carousel').on('mouseenter',function(){ $( this ).carousel();})

Bootstrap carousel本身工作正常。只是当我试图动态初始化它时，它不起作用。（我刚开始使用角度和引导程序，所以我可能会在这里找到一些非常简单的东西。）我正在为我的应用程序使用角度js和bootstrap。

编辑：这是我的HTML代码：

$('.carousel').on('mouseenter',function(){ $( this ).carousel();})

角度代码：

<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>

我用bower来处理依赖关系。

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;
    });


});

Answer 1

我遇到了同样的问题，我遗漏的内容包括bootstrap.js中的index.html，并在添加了以下内容之后发布了。

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

Answer 2

你只需要在 html body 的底部设置你的脚本。

<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>

Answer 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>

而不是相反。

TypeError：$（...）。carousel不是函数

3 个答案: