Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Tatiana Frambach
Tatiana Frambach
7,791 Points

My jQuery won't work on my website

Hi guys,

I'm starting to build my first portfolio and loaded jQuery from google host. It's not working and I've checked all the tags... can someone help?

<head>
    <meta charset="utf-8">
    <title>Tatiana Frambach</title>

    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script type="text/javascript" src="js/app.js" charset="UTF-8"></script>

    <script src="https://use.typekit.net/baq3fnh.js"></script>
    <script>try{Typekit.load({ async: true });}catch(e){}</script>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>

Code on app.js for testing:

$( "#seta" ).click(function() {
  alert( "Handler for .click() called." );
});

2 Answers

Robert Chamblee
Robert Chamblee
12,711 Points
Robert Chamblee
Robert Chamblee
12,711 Points

The entire document needs to load before your app.js file loads so that it can know that there is an element with the id #seta. You can either put the script tag for your app.js file at the end of your document (i.e. - right before your closing body tag) or you can put your click handler (in app.js) inside an anonymous function that executes when the document is ready (using the jQuery document.ready method) like this:

$( document ).ready(function() {
    $( "#seta" ).click(function() { alert( "Handler for .click() called." ); });
});
Tatiana Frambach
Tatiana Frambach
7,791 Points
Tatiana Frambach
Tatiana Frambach
7,791 Points

Thank you!