jQuery not running locally

Question

I have the following links declared inside the head tag:

<script type="text/javascript" src="javascript/jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="javascript/scripts.js"></script>

And the following code inside the scripts file:

$("#person").hover(function() { 
    // trigger the mouseover event
    $("#person-text span").addClass("important-info");
}, function() { 
    // trigger the mouseout event
    $("#person-text span").removeClass("important-info");
});

$(document).ready(function(){
    console.log( "ready!" );
});

I have also tried adding the jQuery library through Google and Microsoft CDNs, but it didn't work as well.

Here is a screenshot from the console errors:

If the scripts are in the head, you'll need `$(document).ready` to be able to actually wait for the elements to be available. — adeneo, Aug 12 '16 at 18:14
@ChristosMaris No not your JSLint console, but the one build in your browser which will give you actual error messages — empiric, Aug 12 '16 at 18:14
@ChristosMaris That image is not what we're looking for. In your browser, hit F12, a frame should open, and you should see a tab called "console". Click it and refresh your page. What do you see? — Michael Hommé, Aug 12 '16 at 18:25
@RegencySoftware Why's that? jQuery works locally, provided that the file exists and is [encoded properly](http://stackoverflow.com/questions/5926701/jquery-code-doesnt-work-if-im-using-a-local-jquery-js-file-why#answer-5926793). — showdev, Aug 12 '16 at 18:30
showdev, you are right, I must have been mixing that up with something else. I removed the comment. — Elim Garak, Aug 12 '16 at 22:45

score 1 · Accepted Answer · edited Aug 12 '16 at 20:58

1

I had a similar problem few days back. I moved the custom script tag at the end of the HTML page and the code worked. It generally happens for the $(document).ready() function.

<script type="text/javascript" src="javascript/scripts.js"></script>

Move the above line to the end of your Html page and that should work.

edited Aug 12 '16 at 20:58

Raktim Biswas

4,011
5
27
32

answered Aug 12 '16 at 18:14

Nihar Sarkar

1,187
1
13
26

What do you mean in the end of the HTML page? Where exactly? – Christos Maris Aug 12 '16 at 18:18
1

First of all thanks so much, it worked. Second of all, does anyone know why? – Christos Maris Aug 12 '16 at 18:20
whatever page u are using , HTML/PHP /ASPX . move this just before the
ending tag
– Nihar Sarkar Aug 12 '16 at 18:21
@ChristosMaris I believe this answer is referring to [this strategy](http://stackoverflow.com/questions/2105327/should-jquery-code-go-in-header-or-footer). Here's [another explanation](http://stackoverflow.com/questions/196702/where-to-place-javascript-in-a-html-file/23476758#23476758). – showdev Aug 12 '16 at 18:23
$(document).ready() function start executing after the page is Fully ready .After each and every single element load . – Nihar Sarkar Aug 12 '16 at 18:25

score 0 · Answer 2 · answered Aug 12 '16 at 18:21

try using $(document).ready(function(){/*your code*/})
and try to change if your browser console showing 404 error for jQuery file

<script type="text/javascript" src="javascript/jquery-3.1.0.min.js"></script>

to

 <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.min.js
"></script>

jQuery not running locally

2 Answers2