jQuery - preventDefault stops working after i add more code

Question

I'm working with an image gallery. when I click on a photo, I would like nothing to happen. I used this code to accomplish that >>>

$('#imageGallery a').click(function(event){
event.preventDefault();     });

but all of a sudden, if I add this top line....

var $overlay = $("<div id = "overlay"></div>");

$('#imageGallery a').click(function(event){
    event.preventDefault();     
   });

...My code no longer works and the photo that I click goes to another page. Is there something I'm not doing or could this be a browser issue?

Answer 1

It's better to let jQuery create HTML elements for you. You had some typos in what you tried that resulted in malformed code. These are some methods of creating an element that are in decreasing order of human-error proneness:

Try using

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

or

var $overlay = $("<div id = \"overlay\"></div>");

or

var $overlay = $("<div/>", {id: "overlay"});

or

var $overlay = $('<div/>').attr("id", "overlay");

to create new elements in the future.