Scrollspy is not working with my code

Question

I get the error message Uncaught TypeError: Property '$' of object [object Object] is not a function

after calling:

$('body').scrollspy({ target: '.nav.navbar-nav' })

Here is how I structured my code:

<body>
     <div class="outbox">         <nav class="navbar navbar-default navbar-fixed-top" role="navigation">   <div class="container-fluid">
     <!-- Brand and toggle get grouped for better mobile display -->
     <div class="navbar-header">
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
       </button>
      <a class="navbar-brand" href="http://www.google.de/"><strong>Google</strong></a>
     </div>

 <!-- Collect the nav links, forms, and other content for toggling -->
 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
   <ul class="nav navbar-nav">      
     <li><a href="#link1">LINK 1</a></li>
     <li><a href="#link2">LINK2</a></li>
     <li><a href="#link3">LINK3</a></li>       
   </ul>    
</div><!-- /.navbar-collapse -->   </div><!-- /.container-fluid --> </nav>

[... CONTENT AREA ]

<div id="link1" class="container"></div> 
<div id="link2" class="container"></div> 
<div id="link3" class="container"></div> 


 <script src="js/jquery-1.10.2.min.js"></script>
 <script src="js/bootstrap.min.js"></script>      
 <script src="js/lib/bootstrap-scrollspy.js"></script>

Does anybody knows a solution for this problem?

`js/jquery-1.10.2.min.js` the file is surely in this directory? — loveNoHate, Feb 08 '14 at 09:12
can you create a fiddle or a bootply ? and you should follow the mark up http://getbootstrap.com/javascript/#scrollspy — rockStar, Feb 08 '14 at 09:14
and also target the `div` not the direct `ul` so make your target `navbar-collapse` — rockStar, Feb 08 '14 at 09:15
Never heard of this issue with bootstrap, but here is what wordpress does http://stackoverflow.com/questions/10807200/jquery-uncaught-typeerror-property-of-object-object-window-is-not-a-funct. — loveNoHate, Feb 08 '14 at 09:17

score 2 · Answer 1 · answered Feb 08 '14 at 09:29

n the body, you need to initialized the data-target and in the js.

$('body').scrollspy({ target: '.navbar-collapse' })

Instead of targeting the direct ul you need to target the div binding the ul.

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
   <ul class="nav navbar-nav">      
     <li><a href="#link1">LINK 1</a></li>
     <li><a href="#link2">LINK2</a></li>
     <li><a href="#link3">LINK3</a></li>       
   </ul>    
</div>

A bootply working sample

Scrollspy is not working with my code

1 Answers1