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

Jeremy Coleman
Jeremy Coleman
5,449 Points
Posted by Jeremy Coleman
Jeremy Coleman
5,449 Points

Having trouble with event.preventDefault(); not working. [Fixed]

I have been trying to get this to work for sometime still struggling with it. I posted this on my public website. Will remove after I get it resolved of course.

Basically what I am supposed to do is stop the links from transferring me to the image as I am building a lightbox. But the event.preventDefault(); is not working for some reason.

Here is the code I currently have, also live on the website which I'll post the link at the bottom.

<!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>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
</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>

        <li><a href="images/space-juice.png"><img src="images/space-juice.png" width="100" alt="Space Juice by Mat Helme"></a></li>

        <li><a href="images/education.png"><img src="images/education.png" width="100" alt="Education by Chris Michel"></a></li>

        <li><a href="images/copy_mcrepeatsalot.png"><img src="images/copy_mcrepeatsalot.png" width="100" alt="Wanted: Copy McRepeatsalot by 
        Chris Michel"></a></li>

        <li><a href="images/sebastian.png"><img src="images/sebastian.png" width="100" alt="Sebastian by Mat Helme"></a></li>

        <li><a href="images/skill-polish.png"><img src="images/skill-polish.png" width="100" alt="Skill Polish by Chris Michel"></a></li>

        <li><a href="images/chuck.png"><img src="images/chuck.png" width="100" alt="Chuck by Mat Helme"></a></li>

        <li><a href="images/library.png"><img src="images/library.png" width="100" alt="Library by Tyson Rosage"></a></li>

        <li><a href="images/boat.png"><img src="images/boat.png" width="100" alt="Boat by Griffin Moore"></a></li>

        <li><a href="images/illustrator_foundations.png"><img src="images/illustrator_foundations.png" width="100" alt="Illustrator 
        Foundations by Matthew Spiel"></a></li>

        <li><a href="images/treehouse_shop.jpg"><img src="images/treehouse_shop.jpg" width="100" alt="Treehouse Shop by Eric Smith"></a></li>
    </ul>
    <script src="js/app.js" type="text/javascript" charset="utf-8"></script>

</body>
</html>

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

2 Answers

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

Yeah pretty sad it took me 4 or 5 hours to figure that out lol

A Laypanov
A Laypanov
27,579 Points
A Laypanov
A Laypanov
27,579 Points

Try to check the console, because it shows an error with extra brackets on line 13