IE jQuery problem

Question

HTML:

<div id="media-photo">
    <img src="/uploads/photos/16.jpg" alt="" />
</div>
<a href="/uploads/photos/5.jpg" class="img">
    <img src="/uploads/photos-thumbs/5.jpg" alt="" />
</a>
<a href="/uploads/photos/6.jpg" class="img">
    <img src="/uploads/photos-thumbs/6.jpg" alt="" />
</a>

JQUERY:

$(document).ready(function() {
    $('a.img').click(function() {
        var path = $(this).attr('href');

        $('#media-photo img').attr('src', path);

        return false;
    });
});

Explanation:

What the above code is supposed to do is when you click on an anchor (with class img), the image in the #media-photo div get changed to a new one based on the anchor's href attribute (the href is a relative path to an image, it replaces the current img's src attribute).

It works great in Firefox.

In IE (version 8 specifically, I haven't tested older versions yet), what happens that when you click on the anchor the image opens in the browser instead.

How to make this work in IE, too?

EDIT:

I have solved the problem by using try {} finally {} to make sure the function returns false (to prevent the default behavior). Here is the entire jQuery code (I have simplified it greatly above not to confuse people with irrelevant stuff):

$(document).ready(function() {
    $('.box-content2 a.img').click(function() {
        var path = $(this).attr('href');
        var title = $('img', this).attr('alt');
        var description = jQuery.trim($(this).attr('title'));
        var id = $(this).attr('id');

        if (id != $('#media-photo img').attr('id')) {

            try {

                $('#media-photo img').attr('src', path);
                $('#media-photo img').attr('alt', title);
                $('#media-photo img').attr('id', id);

                $('#content h2:first').text('You Are Viewing "' + title + '"');
                $('title').text('You Are Viewing "' + title + '"');

                if (description.length > 0) {
                    $('#content .box-container:first').removeClass('invisible');
                    $('#content .box-container:first p').text(description);
                } else {
                    $('#content .box-container:first').addClass('invisible');
                }

                var action = '/view/favoriting-form/id/' + id;

                $.get(action, function(data) {
                    if ($('.favoriting').length > 0) {
                    $('.favoriting').replaceWith(data);
                    } else {
                        $('#actions h3').after(data);
                    }
                });

                action = '/view/rating-form/id/' + id;

                $.get(action, function(data) {
                    if ($('.rating').length > 0) {
                        $('.rating').replaceWith(data);
                    } else {
                        if ($('.favoriting').length > 0) {
                            $('.favoriting').after(data);
                        } else {
                            $('#actions h3').after(data);
                        }
                    }
                    $('.star').rating();
                });

                action = '/view/add-media-comment/id/' + id;

                $.get(action, function(data) {
                    $.getScript('/js/photo.js');
                    $('#media-comments').html(data);
                });

            } finally {

                return false;
            }

        }

        return false;
    });
    $('#add_to_favorites').hover(function() {
        var id = $('#media-photo img').attr('id');
        var action = '/view/photo/id/' + id;
        $('.favoriting').attr('action', action);
    });
    $('#rate-button').hover(function() {
        var id = $('#media-photo img').attr('id');
        var action = '/view/photo/id/' + id;
        $('.rating').attr('action', action);
    });
    $('a.previous-media, a.next-media').click(function() {
        var id = $('#media-photo img').attr('id');
        var href = $(this).attr('href');
        href = href.split('/');
        var p = href[href.length - 1];
        var url = '/view/album-photos/id/' + id + '/p/' + p;

        $.get(url, function(data) {
            $.getScript('/js/photo.js');
            $('.box-content2').html(data);
        });

        return false;
    });
    $('#media-comments form').submit(function() {
        var id = $('#media-photo img').attr('id');
        var url = '/view/add-media-comment/id/' + id;

        var postData = $(this).serialize() + '&add_comment=Submit';
        $.post(url, postData, function(data) {
            $.getScript('/js/photo.js');
            $('#media-comments').html(data);
        });

        return false;
    });
});

Answer 1

In this line:

if (id != $('#media-photo img').attr('id')) {

Where does id come from?

Answer 2

Hmm, try this quickly and tell me if it works:

$(document).ready(function() {
    $('a.img').click(function(ev) {
        var path = $(this).attr('href');

        $('#media-photo img').attr('src', path);
        ev.preventDefault();
        return false;
    });
});