jquery prevent default does not work

Question

I want to change image when user click on a thumb image, and prevent it to jump to the top of page.

the first code I wrote:

$('#photos-list img').click(function(e) {
 e.preventDefault();

 var imgObj = new Image();
 var targetObj = $('#main_image img');
 imgObj.onload = function() {
  targetObj.attr('src',this.src);

 }
 imgObj.src = $(this).attr('rel');
});

the preventDefault() works fine. ok, I want to add some effects to the image changing, like fade in, I add some jquery effects in

$('#photos-list img').click(function(e) {
 e.preventDefault();

 var imgObj = new Image();
 var targetObj = $('#main_image img');
 imgObj.onload = function() {
  targetObj.hide();
  targetObj.attr('src',this.src);
  targetObj.fadeIn('normal');

 }
 imgObj.src = $(this).attr('rel');
});

and this time , the preventDefault does not work, even I gave fadeIn() a preventdefault like:

targetObj.fadeIn('normal', function(e1){e1.preventDefault();});

any methods to solve this problem?

Answer 1

You must be getting an error for the preventDefault to fail (although the js looks ok at first glance). Have you got firebug? Is that the exact source?

Answer 2

try to end funtion with

return false;

Answer 3

You need to enable ie support.

Try the following:

$('#photos-list img').click(function(event) {

var ev = event || window.event;

ev.preventDefault();

... the rest of your code

Answer 4

The callback of the jQuery fadeIn function didn't receive an event parameter.

I asume you have the following structure:

<div id="#photos-list>
  <a href="#"><img src="..." /></a>
</div>

So try this:

$('#photos-list a').click(function(e) {
    e.preventDefault();
});