Question

我已经意识到这个主题已经有数百个问题，但在仔细审查了几十个问题后，他们都包含了错误顺序的脚本标签。我的是正确的。

<link rel="stylesheet" href="/vendor/owl.carousel.min.css">
<link rel="stylesheet" href="/stylesheets/styles.css">
...
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>
<script type="text/javascript" src="/javascripts/scripts.min.js"></script>
...
<div class="homepage-slider">
  ...
</div>

在scripts.min.js中我有我的init：

$(function() {
  $(".homepage-slider").owlCarousel();
});

此命令抛出：

r（...）。owlCarousel不是函数

一切似乎都是正确的顺序。是否存在某种破坏它的jQuery怪癖？我试过了：

$.noConflict();
$(function() {
  $(".homepage-slider").owlCarousel();
});

但它没有解决问题。

额外详细信息：

我将我的JS捆绑到一个缩小的文件中。我是这样做的：

...
import {homepageCarousel} from './modules/homepage-carousel';
...

有8个import语句（它们都是jQuery代码的片段）。轮播导入从顶部开始排名第二。

Answer 1

如果您将scripts.min.js包含在页面的头部，那么DOM元素很可能尚未存在。

将您的<script type="text/javascript" src="/javascripts/scripts.min.js"></script>向下移至结束</body>标记之前，您可能会对其进行操作。

这样，DOM元素已经存在，因此owlCarousel将能够找到该元素并做其事。

Answer 2

确定：

我将jquery直接捆绑到NPM包中的scripts.min.js文件中。

在每次进口中，我都有：

var $ = require('jquery');

我删除了该行，并直接包含了CDN中的jQuery：

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

它解决了我的问题。

.owlCarousel（）不是函数

2 个答案: