javascript - Materialize: Uncaught TypeError: $(...).scrollSpy is not a function - Stack Overflow

admin2025-04-19 0

I am using the Materialize framework, and for the life of me can not figure out why the scrollspy plugin is not working for me. My markup or css certainly isn't the issue - I'm certain it's right.

Console is showing:

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

And references the line where I initialize the plugin:

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

I was under the impression that the plugin "came with" materialize's JS, but even when I include scrollspy.js myself in my header, I'm still getting the error.

What am I missing?

I am using the Materialize framework, and for the life of me can not figure out why the scrollspy plugin is not working for me. My markup or css certainly isn't the issue - I'm certain it's right.

Console is showing:

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

And references the line where I initialize the plugin:

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

I was under the impression that the plugin "came with" materialize's JS, but even when I include scrollspy.js myself in my header, I'm still getting the error.

What am I missing?

Share Improve this question edited Jan 4, 2016 at 15:09 War10ck 12.5k7 gold badges44 silver badges55 bronze badges asked Dec 30, 2015 at 22:28 dongle 6511 gold badge6 silver badges19 bronze badges

1 did you try replacing $ with jQuery – Yehuda Schwartz Commented Dec 30, 2015 at 22:33
1 Is the <script> tag for materialize/scrollspy below the <script> tag for jQuery? – Sam Commented Dec 30, 2015 at 22:38
2 If $ refers to jQuery, and so it isn't your issue, you are maybe loading jQuery more than once – A. Wolff Commented Dec 30, 2015 at 22:40
Please show your <script> tags. – Sam Commented Dec 30, 2015 at 22:41

Add a ment |

1 Answer 1

Sorted by: Reset to default 2

I'm totally blind – @A.Wolff was right – I'd mistakenly loaded jQuery (different versions at that) twice.

<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./ajax/libs/jquery/2.1.3/jquery.min.js"></script>

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

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

  <!-- google font -->
  <link href='https://fonts.googleapis./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./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>

转载请注明原文地址:http://conceptsofalgorithm.com/Algorithm/1745066935a283043.html

javascriptMaterialize Uncaught TypeError ()scrollSpy is not a functionStack Overflow

最新回复(0)