0

I'm uploading code from my project to Plunker. You can see it here. When I run the code through a local server and render it in Chrome, the functionality works fine. When I try to run it through Plunker the code fails.

This snippet is inside of script.js:

$('.navbar-toggle').click(function(){

  alert('test1');

    if ($(this).hasClass('login')) {
        $('.navmenu-style1').css("z-index","1");
        $('.navmenu-style').css("z-index","0"); 
    }
    else {
        $('.navmenu-style1').css("z-index","0");
        $('.navmenu-style').css("z-index","1");
    }
});

How can I make it work in Plunker please? Is there a more universal bit of code that I can use or am I simply doing something wrong?

Cheers

mplungjan
  • 134,906
  • 25
  • 152
  • 209
Vercingetorix
  • 253
  • 2
  • 11
  • 1
    Have you tried fixing the HTML syntax error on line 90? – amphetamachine Oct 24 '14 at 15:44
  • @amphetamachine Yes. That doesn't seem to have anything to do with my .js issue. – Vercingetorix Oct 24 '14 at 15:46
  • Did you look at the console? You have two errors both with links to the angular error docs for more information. This seems to be the main one: [`Uncaught Error: [$injector:nomod]`](https://docs.angularjs.org/error/$injector/nomod?p0=sparkr) – War10ck Oct 24 '14 at 15:48
  • I recommend to read the **jQuery tutorial** to learn how to use jQuery properly: http://learn.jquery.com/about-jquery/how-jquery-works/ – Felix Kling Oct 24 '14 at 15:56

1 Answers1

1

You have made one of the most common mistakes anyone makes when using JQuery. You tried to attach a click handler to a DOM object before the DOM was loaded:

<html>
<head>
...
<script src="script.js"></script>

contents of script.js:

$('.navbar-toggle').click(function(){ ... });

You have to wait for the DOM to load before you run that code. Like so:

$(function () {
    $('.navbar-toggle').click(function(){ ... });
});

Note: $(function) is just a shortcut for $(document).ready(function).

amphetamachine
  • 23,162
  • 10
  • 51
  • 68