Question

我尝试从我的json数据创建bootstrap carousel，并使用jQuery-Template来渲染此轮播，（换句话说，我动态创建我的轮播滑块来自我的json数据并使用jQuery-Template）。这是我的代码：

    <div id="main-slide-show" class="slide-show" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
        </ol>
        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
        </div>
    </div>
    <script class="tmpl-gallery-slider" type="text/html">
        <div class="item">
            <img src="/content/{{html file.fileName}}" alt="{{html title}}">
        </div>
   </script>

和我的回调函数（使用jQuery-Template渲染后）如下所示：

function mainSliderCallback() {
        $(".carousel-inner .item").each(function(i){
            $(".carousel-indicators").append('<li data-target="#main-slide-show" data-slide-to="'+i+'"></li>');
        });
        $(".carousel-inner .item").first().addClass("active");
        $(".carousel-indicators li").first().addClass("active");

        $('.carousel-indicators li').bind('click', function (e) {
            $('#main-slide-show').carousel($(e.target).attr('data-slide-to'));
        });
    }

但是当我点击旋转木马的指示符时，我从bootstrap.min.js收到此错误：

TypeError：e [g]不是函数

另一方面，加载页面完成后，在Firebug中使用此代码，将carousel更改为幻灯片1，没有错误：

$('#main-slide-show').carousel(1);

现在我的问题是我的代码/解决方案出了什么问题？

Answer 1

我有同样的问题，只需让你的＆＃34;滑到＆＃34; param to integer，一切都会好的。

相反

 $('#main-slide-show').carousel($(e.target).attr('data-slide-to'));

使用

var slideTo= $(e.target).attr('data-slide-to');
$('#main-slide-show').carousel(parseInt(slideTo));

Answer 2

我遇到了同样的问题，但这与我如何链接轮播控件有关。

由于某些代码编辑器的插件非常印刷/美化，或者可能是网页上的复制和粘贴，因此在控制代码中有一个额外的空间，检查第一行数据中next之后的额外空格 - 幻灯片（您必须向右滚动才能看到它）：

<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next ">
  <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
  <span class="sr-only">Next</span>
</a>

删除额外的并使用它之后，一切顺利：

<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
  <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
  <span class="sr-only">Next</span>
</a>

PS：在结束"之前还有其他带有额外空格的属性，但在我的情况下，该特定属性是关键。

Answer 3

因为这是谷歌的第一个记录，也许它会帮助某人：

<a class="carousel-control"  data-slide="1" href="#carousel">
<!-- change data-slide to "data-slide-to" -->
<a class="carousel-control"  data-slide-to="1" href="#carousel">

祝你好运

Bootstrap Carousel TypeError：e [g]不是函数

3 个答案: