Materialize: Uncaught TypeError: $(...).scrollSpy is not a function

Question

我正在使用 Materialize 框架，我一直无法弄清楚为什么 scrollspy 插件对我不起作用。我的标记或 css 肯定不是问题 - 我确定它是正确的。

控制台正在显示：

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

并引用我初始化插件的行：

$( document ).ready(function() {
    $('.scrollspy').scrollSpy();
});

我的印象是插件 "came with" 实现了 JS，但即使我在我的 header 中包含 scrollspy.js 自己，我仍然遇到错误。

我错过了什么？

Answer 1

我完全瞎了 – @A.Wolff 是对的 – 我错误地加载了 jQuery（当时不同的版本）两次。

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=.9">
  <title>{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}</title>
  <meta name="description" content="{% if page.excerpt %}{{ page.excerpt | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.description }}{% endif %}">
  <link rel="stylesheet" href="{{site.baseurl}}/css/custom.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

 <!-- Compiled and minified CSS -->
<!--   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/css/materialize.min.css">
 -->
  <!-- Compiled and minified JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/js/materialize.min.js"></script>

  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

  <!-- google font -->
  <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,700,800,600,400italic,800italic' rel='stylesheet' type='text/css'>

  <!-- scrollspy -->
  <script type="{{site.baseurl}}/js/scrollspy.js"></script>

  <!-- jquery -->
  <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

  <!-- custom js -->
  <script src="{{site.baseurl}}/js/nav.js"></script>

  <link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">
  <link rel="alternate" type="application/rss+xml" title="{{ site.title }}" href="{{ "/feed.xml" | prepend: site.baseurl | prepend: site.url }}" />
</head>

Materialize: Uncaught TypeError: $(...).scrollSpy is not a function

Materialize: Uncaught TypeError: $(...).scrollSpy is not a function

javascript

jquery

materialize

scrollspy