Basic jQuery commands not working

Question

Can anyone tell me why none of the javascript/jQuery commands I try ever work on my computer, but always work on the internet? Here is an example of basic commands:

Javascript file (test.js), css file (test.css) (don't mind the css) and html file (test.html):

var $list = $('li');
$list.click(function() {
  alert("working");
  });

li {
  list-style-type: none;
  position: relative;
  margin: 1px;
  padding: 0.5em 0.5em 0.5em 2em;
  background: grey;
}

li.done {
  background: #CCFF99;
}

li.done::before {
    content: '';
    position: absolute;
    border-color: #009933;
    border-style: solid;
    border-width: 0 0.3em 0.25em 0;
    height: 1em;
    top: 1.3em;
    left: 0.6em;
    margin-top: -1em;
    transform: rotate(45deg);
    width: 0.5em;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" type="text/css" href="test.css">
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
    <script type="text/javascript" src="test.js"></script>
  </head>
  <body>
    
    <ul>
  <li>Acheter du lait</li>
  <li>Promener le chien</li>
  <li>Faire de l'exercice</li>
  <li>Coder</li>
  <li>Jouer de la musique</li>
  <li>Relax</li>
</ul>
  </body>
</html>

See? It works on stack overflow. Yet, when I run the html file from my computer, the js/jq scripts never work. I know I haven't linked the js file improperly, because Safari developer tools are able to access it from the html file. What's wrong here?

Can you explain what you mean by "Yet, when I run the files from my desktop, the js/jq scripts never work." — Inspector Squirrel, Mar 03 '15 at 15:06
You should do a quick edit. The way the question is, it seems like all three pieces are in the same file being under HTML: — Asheliahut, Mar 03 '15 at 15:06
I would check whether jquery-2.1.3.min.js is getting loaded. I would also make use of the console to see if I could use `$('li')` to grab the list items. — Mr. Meeseeks, Mar 03 '15 at 15:18

Igor · Answer 1 · 2015-03-03T15:43:36.217

2

If $list.click part is in test.js, then you are executing this code before li elements are constructed. Wrap your code in $(document).ready(function(){...})

Note:

It works here, because in the snippet frame source stackoverflow appended your javascript fragment below html - so that the code is executed when the DOM is fully constructed.

edited Mar 03 '15 at 15:43

answered Mar 03 '15 at 15:08

Igor

15,833
1
27
32

score 1 · Answer 2 · edited May 23 '17 at 11:56

1

Try to write you code in $(document).ready() so that you DOM is ready to use, otherwise it may not work. You have to add:

$(function(){
    //Your Js code
});

In your example use:

$(function(){
var $list = $('li');
$list.click(function() {
  alert("working");
  });
});

Same problem: Script tag works inside the body but doesn't work outside

edited May 23 '17 at 11:56

Community

1
1

answered Mar 03 '15 at 15:24

JoanR

128
1
7

score 1 · Answer 3 · answered Mar 03 '15 at 15:45

1

Ok, I found it. I just had to wrap the code in

$(function(){

});

or

$(document).ready(function(){
//code
});

Thanks to Igor and JoanR.

answered Mar 03 '15 at 15:45

Guillaume Duchesne

41
4

score 0 · Answer 4 · edited May 23 '17 at 12:06

The problems you are having may be related to how you are opening your web pages in the browser.

You cannot just open them as files: c:\website\index.html

Instead, you should install a stack such as WAMP, or XAMPP, or EasyPHP. I recommend XAMPP

After installation, you just type in the browser address bar:

localhost

And you will see the rendered contents of index.html from the c:\xampp\htdocs folder. That folder (c:\xampp\htdocs) becomes your website, and it works exactly like a website. Resources will load correctly (this sounds like the problem you are having).

After installation, just clear out that folder, and copy all your web site .html and .php etc files into that folder. Use the same folder structure you have on your website. A CPANEL website's public_html folder is the c:\xampp\htdocs folder on your C: drive.

If you create a folder in there, such as dev, and put a file inside it called mytest.html, then in the browser address bar you can type:

localhost/dev/mytest.html

Another great trick is to give yourself a domain by editing the Windows hosts file. For example, you can use the duchesne.com domain locally by editing this file:

c:\windows\system32\drivers\etc\hosts

Note that the file does not have an extension.

Then, inside that file, at the very very bottom, on a line of its own, type:

127.0.0.1     duchesne.com

After saving that file, when you type in the browser address bar:

http://duchesne.com

You will get the index.html file from your c:\xampp\htdocs folder. And if you type:

http://duchesne.com/dev

You will get the index.html file from your c:\xampp\htdocs\dev folder.

It is very important to NOT FORGET about that file! It will forever prevent you from accessing the online http://duchesne.com website. Of course, disabling it is as simple as commenting out that line (by putting a # in front) or by messing up the redirect, which is what I usually do:

127.0.0.1     xduchesne.com

(Deleting the leading x is easier than retyping the entire line). Coolest thing: the changes take place instantly, without rebooting -- or even bouncing the browser.

Resources:

Windows: XAMPP vs WampServer vs EasyPHP vs alternative

Actually you can just open them, they would have `file://` at the start. XAMPP is used for if you want your own local server, using it for just running JS for a single file is overkill. — Spencer Wieczorek, Mar 03 '15 at 15:11
You don't need a XAMPP installation to test js. I have downloaded multiple js tutorials that work locally. For instance, this file has js that works : file:///Users/guillaume/Downloads/FullscreenLayoutPageTransitions/index.html — Guillaume Duchesne, Mar 03 '15 at 15:14

Mateusz Mania · Answer 5 · 2015-03-03T15:17:55.897

0

If You put Your html file via "drag&drop" to browser window, and You see file:// as protocol, then jQuery cant be downloaded from URL. This is propably Your problem.

Edit:

I see Your JS code is inside test.js file which is loaded in head section. So if this is still not working, try to replace code in Your test.js file to following:

$(document).on('click', 'li', function (){

    alert('working');
});

edited Mar 03 '15 at 15:17

answered Mar 03 '15 at 15:08

Mateusz Mania

839
4
15

1

But he's not using any protocol-relative URLs, so how would this apply? – j08691 Mar 03 '15 at 15:09
As I remember this is dependent by operating system/browser. For example, now, I working on windows 7, 8, chrome, and this is not problem. But i remember in past i haves same problem on (propably) older ff versions and other operating systems. – Mateusz Mania Mar 03 '15 at 15:10

score 0 · Answer 6 · answered Mar 03 '15 at 15:14

0

You might have to include the JQuery library for your website to know it is going to use JQuery. Here is one way to include it: In the head tag of your html , paste the script below:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

answered Mar 03 '15 at 15:14

Pasoum

27
10

1

The OP did include jQuery: ``. – Spencer Wieczorek Mar 03 '15 at 15:16
I already have included jQuery via this CDN : https://code.jquery.com/jquery-2.1.3.min.js – Guillaume Duchesne Mar 03 '15 at 15:18

score 0 · Answer 7 · answered Mar 03 '15 at 15:24

It's times like these where CDN fallbacks are critical. Example:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
    if (!window.jQuery) {
        document.write('<script src="//code.jquery.com/jquery-1.10.2.min.js"><\/script>');
    }
</script>
<script>
    if (!window.jQuery) {
        document.write('<script src="/Scripts/jquery-1.10.2.min.js"><\/script>');
    }
</script>

If the Google CDN fails it loads jQuery CDN. If THAT fails too then it loads the local copy.

Developer tools is letting me know that it gets loaded. Thanks, though, this is good advice. — Guillaume Duchesne, Mar 03 '15 at 15:36

score 0 · Answer 8 · answered Mar 03 '15 at 15:47

Just try if this can help

How about using a safe jquery coding ? like the codes below ?

jQuery(document).ready(function ($) {
    $('li').click(function() {
        alert("working");
    });
});

or

jQuery(document).ready(function () {
    jQuery('li').click(function() {
        alert("working");
    });
});

Basic jQuery commands not working

8 Answers8