IE not marking links as "visited" when rendered via javascript

Question

I am working with a site where all content is rendered via ajax postbacks using jquery. I am using Ben Alman's hashchange (http://benalman.com/projects/jquery-hashchange-plugin/) to manage the hash history which allows me to bookmark pages, use the back button etc... Everything works perfectly on everything but IE 9 of course. In IE there is a small issue with "visited" links not being marked as visited. You can see that the link turns purple(visited) for a split second after you click it before the new content is loaded. But once you click the back button the link appears as though it has never been visited. Here is a jfiddle example of what I am talking about: http://jsfiddle.net/7nj3x/3/

Here is the jsfiddle code assuming you have jquery and the hashchange plugin referenced in head:

$(function(){
  // Bind an event to window.onhashchange that, when the hash changes, gets the
  // hash and adds the class "selected" to any matching nav link.
  $(window).hashchange( function(){
    alert("Hash changed to:"+location.hash);  
    var hash = location.hash;
    // Set the page title based on the hash.
    document.title = 'The hash is ' + ( hash.replace( /^#/, '' ) || 'blank' ) + '.';
    //simulate body being rendered by ajax callback 
      if(hash == ""){  
        $("body").html("<p id='nav'><a href='#test1'>test 1</a> <a href='#test2'>test 2</a> <a href='#test3'>test 3</a></p>");
      }
      else{
        $("body").html("Right click within this pane and select \"Back\".");  
      }
  })
  // Since the event is only triggered when the hash changes, we need to trigger
  // the event now, to handle the hash the page may have loaded with.
  $(window).hashchange(); 
});

Answer 1

You can simply use IE conditional comments to load a specific style:

<!--[if IE]>
  a:visited {
     padding-left: 8px;
     background: url(images/checkmark.gif) no-repeat scroll 0 0;
}
<![endif]-->