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

Watch Video

Posted October 11, 2014 5:49pm by

I can't get event.preventDefault(); to work.

I'm trying to get prevent the user from being taken to a dead end when they click on a pick in my image gallery so I've used event.preventDefault() within the .click() method. This is not working. Any ideas?

Here's my jquery code:

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

October 11, 2014 7:04pm

Hi Mark,

Are you saying that when you click on the link you're taken to the url?

Can you post the html that you have for this part of the code?

One thing you can try is to put a console.log statement at the top of the handler and see if you're even seeing that in your console.

October 11, 2014 7:47pm

Here's my html and css code. Notice the id under my first header:

<!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>
        <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="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/app.js" type="text/javascript" charset="utf-8"></script>

</body>
</html>

CSS code:

body {
    font-family: sans-serif;
    background: #384047;
}
h1 {
    color: #fff;
    text-align: center
}

ul {
    list-style:none;
    margin: 0 auto;
    padding: 0;
    display: block;
    max-width: 780px;
    text-align: center;
}
ul li {
    display: inline-block;
    padding: 8px;
    background:white;
    margin:10px;
}
ul li img {
    display: block;
}
a {
    text-decoration: none;
}
/** Start Coding Here **/
#overlay{
  background:rgba(0,0,0,0.7);
  width:100%;
  height:100%;
  position: absolute;
  top: 0;
  left: 0;
  display: none;
}

October 11, 2014 8:00pm

So is it going to the url when you click?

Did you try putting in a console log statement like I mentioned?

6 Answers

October 16, 2014 7:11pm

I took the HTML, CSS & JSyou had and put in in JSBin.

I then defined the overlay and appended it to the body

var $overlay = $('<div id="overlay"></div>');
$("body").append($overlay);

Finally I added in console.log(href);to the click function to see the value of the href

You can check it out for yourself: http://jsbin.com/wovepa/1/edit?js,console,output

The only issue I had was originally I used

var $overlay = '<div id="overlay"></div>';

Note the missing parentheses around the div, that will throw an error.

January 29, 2015 11:10pm

have same issue. In Firefox it works, in Chrome it doesn't. What could be the reason?

October 11, 2014 6:05pm

This code seems correct. I'd check for typos in the rest of the code. Maybe you accidentally mistyped "imageGallery" (?)

October 11, 2014 6:09pm

I'm using chrome and I checked the setting to make sure that Javascript is enabled. It is. Have you ran into this problem with jquery before?

October 11, 2014 6:15pm

No i haven't. In fact, i made a simple html page right now and tested it. Though, i have ran into a problem many times (when developing without an IDE) where i wrote something like this

<!-- Notice the misspelled id -->
<ul id="imaegGallery">
...
</ul>

.....
<script>
$("#imageGallery a").click(function(event) { 
...
});
</script>

October 11, 2014 7:43pm

This was very helpful. Thanks. I still can't get it to work. Weird.

November 26, 2014 3:29am

Try this code and see if the "href" for the images are being called to the console. Also the browser should not open image links when ran if correct

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

November 26, 2014 3:40am

Thanks for the response Jeremy. This is an old question. I was able to figure out what the problem was with my code.

March 28, 2015 1:01am

This worked for me: 1) Double check your code for typos, etc. If it looks good, save it again. 2) Close the Treehouse Image Gallery/Preview Window. 3) In Workspaces, hit the Preview icon (upper right corner) to open a new/refreshed copy of the Image Gallery window. 4) Click on any image in the gallery. At this point, it all worked for me: a) the browser's default behavior was "prevented." b) the correct code was showing in the JavaScript console.

I hope this helps :)

Posting to the forum is only allowed for members with active accounts.
Please sign in or sign up to post.

Welcome to the Treehouse Community

Looking to learn something new?

Mark Bradshaw

Mark Bradshaw

I can't get event.preventDefault(); to work.

Jason Anello

Jason Anello

Mark Bradshaw

Mark Bradshaw

Jason Anello

Jason Anello

6 Answers

James Barnett

James Barnett

Mathias Menzl

Mathias Menzl

Dimitris Sotiris Tsolis

Dimitris Sotiris Tsolis

Mark Bradshaw

Mark Bradshaw

Dimitris Sotiris Tsolis

Dimitris Sotiris Tsolis

Mark Bradshaw

Mark Bradshaw

Jeremy Woodbridge

Jeremy Woodbridge

Mark Bradshaw

Mark Bradshaw

RG Coders

RG Coders