Metafizzy Isotope Uncaught TypeError

Question

我在一个项目中使用 Laravel，使用 Laravel Mix 编译我的 JS 和 SCSS。

在我有一个投资组合过滤器的一个页面上，我想使用 Metafizzy 的同位素，因为它在以前的项目中运行良好。

我包括了 jQuery，然后是本地的 isotope 包，最后是我的 main.js 文件，所有这些都在结束 body 标记之前。

我在我的 main.js 文件中使用了与此 Codepen Demo 完全相同的 javascript 代码：https://codepen.io/desandro/pen/JEojz

但是我在控制台中收到以下错误：

Uncaught TypeError: $(...).isotope is not a function

我尝试将我的 main.js 文件放在同位素包之前和之后：

<script src="https://code.jquery.com/jquery-3.5.1.min.js" crossorigin="anonymous"></script>
<script type="text/javascript" src="/js/isotope.pkgd.min.js"></script>
<script type="text/javascript" src="/js/main.js"></script>

我也尝试通过 npm 安装并将以下内容添加到我的 main.js 文件中：

var Isotope = require('isotope-layout');

无论我做什么，我都会遇到同样的错误，我不确定如何在我的 Laravel 项目中使用它。任何帮助将不胜感激。

Answer 1

看来我忘了把它包装在 $(document).ready(function() {...})