jquery not selecting header element when browser back button clicked in IE

Question

I have an MVC3 webgrid where the first column is being hidden by jQuery with the following code as per this thread:

<script type="text/javascript">
//hide the first column in the result table
$(document).ready(function () {
    $('.webgrid thead th:nth-child(1)').hide();
    $('.webgrid tbody td:nth-child(1)').hide();
});

The code works great except for one thing. The header element doesn't always get hidden if I navigate away from the page and come back by hitting the browser's back button in IE9 (Chrome & Firefox don't seem to have this problem). Interestingly, the td elements in tbody DO get hidden. I used jQuery 1.5.1 and now just tried 1.7.1 with no improvement. Refreshing the page fixes the problem. Any ideas why this is happening or how I should go about investigating what's going on? Thanks!

Update

I took out the code that hides the column, and I STILL get the bug on the back browse!!! I tried cleaning out the cache and still the same. Where is this old broken page coming from? I tried IE in-private browsing and the problem went away, but when I came back to regular browsing the problem came back! I cleaned the cache 10 times! Why is it not working?

Answer 1

So, it was a problem with the cache. IE9 has a checkbox to "preserve favorites website data" and I had that checked with all the other items. As soon as I unchecked it everything worked great! Reference this article for clearing cache.