Back button fails after window.location.replace(href);

Question

I made simple function which makes all container behave like link ("a" element).

function allHot(element){
$(element)
.click(
    function(){
    var href = $(this).find('a').attr('href');
    window.location.replace(href);
})

.hover(
    function(){
    $(this).css({'text-shadow' : '0px 1px 0px #D6D6D6'});
    },
    function(){
    $(this).css({'text-shadow' : 'none'});
    }

);
}

Function works great. Instead of clicking the "more" button, user can click everywhere on container and is properly redirected.

However, if user after redirection clicks back button, browser goes back two steps instead of one as it should. What's more weird, history looks OK.

Simple scheme to better description:

Page1 -> Page2

Page2 [user clicks on "allHot" container] -> allHot redirects to Page3

Page3 [user clicks on browser back button] -> Page1

This is major bug for website I'm working on right now. I don't really have a clue to prevent it. Bug tested on Firefox, Chrome and Opera.

Tested also on Opera "no javascript mode". If javascript is disabled issue doesn't occure.

Thanks in advance for any clue or solution.

Answer 1

Instead of using replace, use the following:

window.location.href = ''