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!
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
Jeremy Coleman
5,449 PointsHaving 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
5,449 PointsYeah pretty sad it took me 4 or 5 hours to figure that out lol
A Laypanov
27,579 PointsTry to check the console, because it shows an error with extra brackets on line 13