CODEWITHSUNDEEP
jqueryhtml
Lee Price
Lee Price

Reputation: 5212

jQuery not loading?

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

Upvotes: 1

Views: 6353

Answers (6)

Chirag Lukhi
Chirag Lukhi

Reputation: 1546

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

try this,it will run..

Upvotes: 4

rainmore
rainmore

Reputation: 30

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

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

Upvotes: -3

davidethell
davidethell

Reputation: 12018

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();
});

Upvotes: 2

Quentin
Quentin

Reputation: 943142

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.

Upvotes: 1

Didier Ghys
Didier Ghys

Reputation: 30666

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.

Upvotes: 4

Richard Dalton
Richard Dalton

Reputation: 35793

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() {});

Upvotes: 3

Related Questions