实现:未捕获TypeError:$(...)。scrollSpy不是函数

时间:2015-12-30 22:28:21

标签: javascript jquery materialize scrollspy

我正在使用Materialize框架,并且在我的生活中无法弄清楚为什么scrolllspy插件不适合我。我的标记或css肯定不是问题 - 我确定它是对的。

控制台显示:

  

未捕获的TypeError:$(...)。scrollSpy不是函数

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

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

我的印象是插件“带有”materialize的JS,但即使我在我的标题中包含了scrollspy.js,我仍然会收到错误。

我错过了什么?

1 个答案:

答案 0 :(得分:2)

我完全失明了 - @ 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>