jQuery not loading?

Question

Feel free to yell abuse at me if I'm being stupid here, but I'm getting confused. It seems like everything should work fine :/ I've triple checked the file locations and everything is fine

I have this in the head:

<head>
<meta charset="utf-8">
<title>Website</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/functions.js"></script>
</head>

I have a list of links like this:

<ul class="menu">
   <li><a href="#">Link 1</a></li>
   <li><a href="#">Link 2</a></li>
   <li><a href="#">Link 3</a></li>
</ul>

And in functions.js I have this...

console.log('WTF.. THIS LOGS IN THE CONSOLE!?!?!?!');

// debugging purposes
alert($('a').attr('href'));

$('.menu li a').click(function(e){
    alert('hey');
    e.preventDefault();
});

I get an alert saying 'undefined' and when I click on a link, default actions is prevented and I don't get an alert...

The conclusion I've come to is there was a problem somewhere with the jQuery... but I just can't find whats going on here

have you surrounded your jquery-calls by $(document).ready(function() { /* your code */ }); or $(function() { /* your code */ });?? — user57508
– user57508, Commented Jan 31, 2012 at 10:49
Which browser do you use? I recommend a plugin like firebug (for firefox) to detect such errors (broken links, script errors etc...) — Martin Brandl
– Martin Brandl, Commented Jan 31, 2012 at 10:51
may need a live code sample, can you put something up at jsfiddle.net? otherwise, it is possible that your document is not loaded before you start actioning on your DOM elements. — danjah
– danjah, Commented Jan 31, 2012 at 10:53

Didier Ghys · Accepted Answer · 2012-01-31 10:50:54Z

4

You probably have to wrap your code within a document.ready handler:

$(document).ready(function() {
    console.log('WTF.. THIS LOGS IN THE CONSOLE!?!?!?!');

    // debugging purposes
    alert($('a').attr('href'));

    $('.menu li a').click(function(e){
        alert('hey');
        e.preventDefault();
    });
});

Keep in mind Javascript is executed as soon as it appears in a page, your <a> elements do not exist yet when your script executes. Using the "ready" event, you ensure your DOM is fully available when your code runs.

You could also add the reference to your functions.js file at the end of the body, before </body> tag.

edited Jan 31, 2012 at 10:50

answered Jan 31, 2012 at 10:49

Didier Ghys

30.6k9 gold badges77 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

danjah Over a year ago

yeah as a convention, if you're likely to forget using :ready, you should be putting your scripts at the end of the body tag, agreed.

Didier Ghys Over a year ago

You can even simply get rid of the document.ready this way actually.

Didier Ghys · Accepted Answer · 2012-01-31 10:56:28Z

4

$(function(){
    //....Your code of java script must be
});

try this,it will run..

edited Jan 31, 2012 at 10:56

Didier Ghys

30.6k9 gold badges77 silver badges82 bronze badges

answered Jan 31, 2012 at 10:53

Chirag Lukhi

1,55617 silver badges45 bronze badges

1 Comment

Didier Ghys Over a year ago

Unformatted code is unreadable. You'd rather add a few explanation words.

Richard Dalton · Accepted Answer · 2012-01-31 10:50:18Z

3

You tried wrapping it all in a $(document).ready() to ensure the dom has loaded?

$(document).ready(function() {
    console.log('WTF.. THIS LOGS IN THE CONSOLE!?!?!?!');

    // debugging purposes
    alert($('a').attr('href'));

    $('.menu li a').click(function(e){
        alert('hey');
        e.preventDefault();
    });
});

That should work for you. (Shortcut for $(document).ready(function() {}); is $(function() {});

answered Jan 31, 2012 at 10:50

Richard Dalton

35.8k6 gold badges75 silver badges92 bronze badges

1 Comment

Lee Price Over a year ago

I'm such an idiot! I forgot something this basic... I don't use jQuery very often

davidethell · Accepted Answer · 2012-01-31 10:53:36Z

2

If the code you pasted is the exact content of your functions.js file then you'll have a problem. Your code is executing before the document is ready. Put your initialization code in a function inside functions.js and then call that function when the document is ready:

$(document).ready(function() {
    // now call your init function
    myInitCode();
});

answered Jan 31, 2012 at 10:53

davidethell

12.1k6 gold badges47 silver badges67 bronze badges

Comments

Quentin · Accepted Answer · 2012-01-31 10:51:23Z

1

Your script element appears in the head and does nothing to delay execution of the code (e.g. by putting it in a function and using document.ready).

Your links appear in the body, which is after the head, so they do not exist when the code runs.

answered Jan 31, 2012 at 10:51

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Comments

rainmore · Accepted Answer · 2012-01-31 10:54:53Z

-3

have you tried to return false in the click event? like following?

$('.menu li a').click(function(e){
    alert('hey');
    e.preventDefault();
    return false;
});

answered Jan 31, 2012 at 10:54

rainmore

301 silver badge4 bronze badges

Collectives™ on Stack Overflow

jQuery not loading?

6 Answers 6

2 Comments

1 Comment

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

1 Comment

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related