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 Jeremy Coleman
Jeremy Coleman
5,449 Points

What's wrong with this jQuery code? (event.preventDefault();)

Alright so, I have a (ul id="imageGallery") with a bunch of li's. Each li has a anchor tag with a image inside, the goal is to prevent the page from going to the image although it's not working.

Been messing with it for ages, and finally decided I should take it to the forum cause I am not understanding this!!

$("#imageGallery a").click( function (event){
    event.preventDefault();
    var href = $(this).attr("href");
    console.log();
});

5 Answers

Marco Slooten
Marco Slooten
7,899 Points
Marco Slooten
Marco Slooten
7,899 Points

Does your HTML look like this?

<ul id="imageGallery">
   <li>
      <a href="http://google.com"><img src="test.jpg"></a>
    </li>  
  </ul>

If so, your code is working for me.

Note that your console.log does not do anything. If you want to see the href variable, you would need to use

console.log(href);
Jeremy Coleman
Jeremy Coleman
5,449 Points
Jeremy Coleman
Jeremy Coleman
5,449 Points

This is what im using, I cut down the li's so it wouldn't be huge.

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" title="no title" charset="utf-8">
    <title>Image Gallery</title>
</head>
<body>
    <h1>Image Gallery</h1>
    <ul class="imageGallery">
        <li><a href="images/refferal_machine.png"><img src="images/refferal_machine.png" width="100" alt="Refferal Machine By Matthew Spiel"></a></li>
    </ul>
    <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="js/app.js" type="text/javascript" charset="utf-8"></script>

</body>
</html>
Marco Slooten
Marco Slooten
7,899 Points

I see! You target imageGallery with an ID in your jQuery, but in your HTML it's a class. Change the jQuery to .imageGallery and it'll work.

$(".imageGallery a").click( function (event){
    event.preventDefault();
    var href = $(this).attr("href");
    console.log(href);
});
Jeremy Coleman
Jeremy Coleman
5,449 Points
Jeremy Coleman
Jeremy Coleman
5,449 Points

Still running into the same issue. This is what it looks like now. (as it shows in the video)

<ul id="imageGallery">
  <li>
    <a href="images/refferal_machine.png"><img src="images/refferal_machine.png" width="100" alt="Refferal Machine By Matthew Spiel">
    </a>
  </li>
</ul>

$( "#imageGallery a" ).click(function( event ) {
        event.preventDefault();
        $(this).attr("href");
        console.log();
});
Marco Slooten
Marco Slooten
7,899 Points

You might be running this on your computer and not on a web server? That would cause the jQuery not to load since there's no protocol (e.g. http:// or https://) so your computer starts looking for a local file which it will not find.

Try changing the jQuery script tags:

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

It should work now. One way to catch these errors is to open up the console which will show an error for the missing file(s).

Jeremy Coleman
Jeremy Coleman
5,449 Points
Jeremy Coleman
Jeremy Coleman
5,449 Points

I am running it on my computer, however added that code and it's still not working

Marco Slooten
Marco Slooten
7,899 Points

This works for me:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" title="no title" charset="utf-8">
    <title>Image Gallery</title>
</head>
<body>
    <h1>Image Gallery</h1>
    <ul id="imageGallery">
        <li><a href="images/refferal_machine.png"><img src="images/refferal_machine.png" width="100" alt="Refferal Machine By Matthew Spiel"></a></li>
    </ul>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script>
    $("#imageGallery a").click( function (event){
    event.preventDefault();
    var href = $(this).attr("href");
    console.log(href);
});
    </script>
</body>
</html>

Can you open up the console and look what it says? In Chrome that's cmd+alt+j for Mac and I think ctrl+alt+j for Windows. Perhaps your local JS isn't loading? Perhaps it's cached the old version of the file?

Jeremy Coleman
Jeremy Coleman
5,449 Points
Jeremy Coleman
Jeremy Coleman
5,449 Points

I got no errors however this is what I did recieve

esource interpreted as Stylesheet but transferred with MIME type text/plain: "http://port-80-hb2mb6q72l.treehouse-app.com/css/style.css".

Resource interpreted as Script but transferred with MIME type text/plain: "http://port-80-hb2mb6q72l.treehouse-app.com/js/app.js".

Jeremy Coleman
Jeremy Coleman
5,449 Points

Only other thing I can think of it's my computer I can put what I have on a public site if you'd like?

I posted it, will remove it after I get this resolved of course. http://www.teamtreehouse.cyberbitdesigns.com/