Metafizzy 同位素未捕获类型错误

Question

我正在使用 Laravel 进行项目，Laravel 混合编译我的 JS 和 SCSS。

在我有投资组合过滤器的其中一个页面上，我想使用 Metafizzy 的 Isotope，因为它在以前的项目中效果很好。

我包含了jQuery，然后是本地的同位素包，最后是我的main.js文件，所有这些都在结束的body标签之前。

我在我的 main.js 文件中使用与此 Codepen 演示完全相同的 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() {...})

Metafizzy 同位素未捕获类型错误

Metafizzy Isotope Uncaught TypeError

javascript

jquery-isotope

laravel

webpack

laravel-mix