TypeError: jQuery(...).find(...).carousel 不是函数答案

【问题标题】：TypeError: jQuery(...).find(...).carousel is not a functionTypeError: jQuery(...).find(...).carousel 不是函数
【发布时间】：2016-01-22 10:13:47
【问题描述】：

由于某种原因，我收到了 js 错误，即轮播不是一个函数，尽管我已经连接了所有脚本，例如jquery.js 和 bootstrap.js 在调用我有轮播功能的 script.js 之前。

我的代码在网站上运行得很好，但是当我转移到网络应用程序时，我得到了这个错误，尽管元素是相同的。

所以在母版页的页眉部分有这个：

<script src="/assets/js/jquery.min.js" type="text/javascript"></script>
    <script src="/assets/js/jquery-noconflict.js" type="text/javascript"></script>
    <script src="/assets/js/jquery-migrate.min.js" type="text/javascript"></script>
    <script src="../Scripts/bootstrap.min.js"></script>
    <script src="/assets/js/script.js" type="text/javascript"></script>

所有脚本都加载正常，一旦我打开页面，我就会遇到这个异常：

在 script.js 我有这个：

jQuery('myCarousel').find('.carousel').carousel({
    interval: 8000
});

我再说一遍，相同的结构在旧网站中运行良好，不知道为什么它在这里不同。

更新

生成的 HTML 标记：

<div id="myCarousel" class="carousel slide">
                    <div class="carousel-inner">
                        <div class="active item">
                        <div class="title"><h2>header</h2></div>
                        <figure><img src="/assets/images/gallery/YCQE183J8RHACYCHLISF.jpg" alt=""></figure>
                        <div class="carousel-caption"><a href="#">Learn more about our programs. </a><div class="arrow-right"></div></div>
                        </div>
                        <div class="item">
                        <div class="title"><h2>text1</h2></div>
                        <figure><img src="/assets/images/gallery/IB819WTCBL3HRM7NZ2CA.jpg" alt=""></figure>
                        <div class="carousel-caption"><a href="">text3</a><div class="arrow-right"></div></div></div>
                        <div class="item"><div class="title"><h2>text2</h2></div><figure><img src="/assets/images/gallery/6KCDVUKYCAXH91M6MWAU.jpg" alt=""></figure><div class="carousel-caption"><a href="#">text4</a><div class="arrow-right"></div></div></div>

                    </div>
                    <a data-slide="prev" href="#myCarousel" class="carousel-control left"></a>
                    <a data-slide="next" href="#myCarousel" class="carousel-control right"></a>
                </div>

【问题讨论】：

轮播脚本在哪里？
@debin：这没有什么区别，除非页面中有<myCarousel>标签，否则选择器是错误的:)
没错（y）@TrueBlueAussie
问：您使用的是哪个特定的轮播？根据显示的脚本，您没有使用任何 :)

标签： javascript jquery html twitter-bootstrap jquery-ui

【解决方案1】：

您似乎缺少任何轮播脚本。这将导致carousel is not a function 消息。它不是 jQuery 的一部分，如果你有完整版本，它只是 boostrap 的一部分。否则，您还需要包含引导程序 carousel.js 插件文件。 http://www.w3schools.com/bootstrap/bootstrap_carousel.asp

此外，您的选择器将不起作用，因为 myCarousel 是一个 id，所以应该是 #myCarousel，但 .carousel 在同一个元素上，所以 find 不会匹配它下面的任何内容：

尝试：

jQuery('#myCarousel.carousel').carousel({
    interval: 8000
});

或者更好（因为 id 选择器是最有效的）只是：

jQuery('#myCarousel').carousel({
    interval: 8000
});

【讨论】：

谢谢，但两种解决方案都给了我同样的错误
@Laziale：再说一遍 - 你用的是什么轮播？ Boostrap 的？
i.gyazo.com/d50cbfd24862378bc039327626ec0424.png 如您所见，我可以获得控件，但无法应用轮播。不确定第二个问题，因为此代码已经在旧解决方案中运行，我们只是转移到网络应用程序而不是网站（.net 明智）
@Laziale：好的，所以您的选择器现在已在上面修复，但您的轮播代码没有触发。您的引导版本是完整版（带有轮播）吗？我猜不会。您可以在之后添加carousel.js bootstrap 插件进行测试。 w3schools.com/bootstrap/bootstrap_carousel.asp

【解决方案2】：

就我而言，我必须在文档就绪函数$( document ).ready(function() { }); 中添加代码，然后错误就消失了。希望它会帮助某人。

【讨论】：