In fiddle perfectly running but NO effect of JQuery on web page

Question

I simply trying to add and remove class on li tag on click. I tried in fiddle and the JQuery is working fine but the very same code is not working on localhost. Fiddle link

Here my page -

<link rel="stylesheet" href="styles.css" />
<script src="jquery-1.7.2.min.js" type="text/javascript"></script>
<script language="javascript">
$('#cssmenu li').on('click', function(){
    $('li.active').removeClass('active');
    $(this).addClass('active');
});
</script>
</head>

<body>
<div id='cssmenu'>
<ul> 
  <li class='active'><a href="#"><span>Home</span></a></li> 
  <li><a href="Untitled-1.html" target="content"><span>About Us</span></a></li> 
  <li><a href="#"><span>Gallery</span></a></li> 
  <li><a href="#"><span>Alumni</span></a></li> 
  <li><a href="#"><span>Events</span></a></li> 
  <li><a href="#"><span>Polling</span></a></li> 
  <li><a href="#"><span>Feedback</span></a></li> 
  <li class='last'><a href="#"><span>Contact Us</span></a></li> 
</ul>   
</div>

This is a part of CSS

#cssmenu li {
  float: left;
  margin: 0 5px 0 0;
  border: 1px solid transparent;
}
#cssmenu li a {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  padding: 8px 15px 9px 15px;
  display: block;
  text-decoration: none;
  color: #ffffff;
  border: 1px solid transparent;
  font-size: 16px;
}
#cssmenu li.active {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  border: 1px solid #36b0b6;
}
#cssmenu li.active a {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  display: block;
  background: #1e6468;
  border: 1px solid #133e40;
  -moz-box-shadow: inset 0 5px 10px #133e40;
  -webkit-box-shadow: inset 0 5px 10px #133e40;
  box-shadow: inset 0 5px 10px #133e40;
}

Any input greatly appreciated as I know I'm just few step away since it already does in fiddle.

What errors do you get in the console when you run it locally? Is jQuery being included? — j08691, Mar 13 '16 at 20:15

score 1 · Answer 1 · answered Mar 13 '16 at 20:17

1

You attach the click handler before the DOM for that element is created. Either move it to the end of the page or put it within $(document).ready()

<script language="javascript">
$(document).ready(function(){
  $('#cssmenu li').on('click', function(){
      $('li.active').removeClass('active');
      $(this).addClass('active');
  });
})

</script>

answered Mar 13 '16 at 20:17

Clyde Lobo

8,747
6
34
58

Sir I checked your formula also, but not worked. – Amit Roy Mar 13 '16 at 20:35

score 1 · Answer 2 · edited May 23 '17 at 12:15

1

Move this

<script language="javascript">
$('#cssmenu li').on('click', function(){
    $('li.active').removeClass('active');
    $(this).addClass('active');
});
</script>

at the end of your <body> tag or have it execute on DOMContentLoaded.

Right now it executes before your DOM is loaded and nothing happens.

UPDATE:

To answer to your comment, putting the script tag after the </body> tag is not really correct, see this question

Anyway, try doing this then.

$(window).load(function(){
  $('#cssmenu li').on('click', function(){
    $('li.active').removeClass('active');
    $(this).addClass('active');
  });
});

edited May 23 '17 at 12:15

Community

1
1

answered Mar 13 '16 at 20:18

Dimitris Karagiannis

7,317
4
29
54

Yup, because `#cssmenu` doesn't exist yet. Good catch. – redbmk Mar 13 '16 at 20:19
@MitchKarajohn According to you all expert I moved the script just after
and before
and tested but no effect, I am writing this code in jsp page.
– Amit Roy Mar 13 '16 at 20:31
@AmitRoy Updated my answer, please check it out. – Dimitris Karagiannis Mar 13 '16 at 20:36
No Nothing working..! I added this file is this file correct – Amit Roy Mar 13 '16 at 20:43
Are you sure you are loading jQuery? If you open your console do you see any errors like '$ is not defined' or something similar? – Dimitris Karagiannis Mar 13 '16 at 20:47
OK I got the problem.. I require this file , When I am using this line it is working, but if I am changing it to it is not working. – Amit Roy Mar 13 '16 at 20:48
But how can I use this jquery-latest.min.js file on localhost (means offline) – Amit Roy Mar 13 '16 at 20:49
Requiring the file with `src="jquery-1.7.2.min.js"` means that you have the jquery file in the same directory as your `.html` file, in your project. You probably don't have it. This `` requires the file over the internet, form a place where it exists, so it works. – Dimitris Karagiannis Mar 13 '16 at 20:49
To use it offline, you need to download the jQuery files to your machine. I'd start from [here](https://jquery.com/download/). If my answer helped you to resolve your issue please consider marking it as an accepted answer – Dimitris Karagiannis Mar 13 '16 at 20:51

In fiddle perfectly running but NO effect of JQuery on web page

2 Answers2