AJAX Links Not Detected By A:Visited

I'm noticing that a:visited styles don't work on links that are requested via JavaScript. On a standard user click though, the exact same link registers as visited, both imm开发者_运维知识库ediately and on subsequent refreshes. I'm not sure if this is unique to jQuery Mobile (where I first encountered it) or whether it's a browser limitation that I didn't know about?

You probably need to change the location.hash if you want it to work with history and visited links styling.

Keep in mind that the visited links styling works somewhat inconsistently between browser after the visited links based browsing history privacy vulnerability was made popular by Did You Watch Porn website.

a:visited matches any link that points to a URL that is in the browser history.

If you use AJAX to cancel navigation to the URL, the URL will never end up in the browser history.

You can fix that by using # links.

a:visited is only triggered if the link is 'executed'.

A link to an AJAX call usually returns 'false' (The solution with a hash (<a href="#">link</a>) still returns false otherwise the user would jump to top of page).

That way the link is never being 'executed', therefore not being marked as visited.

Okay, please don't change a element's href to point to a hashed url like the other answerers are saying - that will break the user experience. If they want to open in new window it will then need to double load, if you do the change server-side it will break search engines and js-disabled users.

The issue is that if you are using hashes to upgrade your website into a RIA (rich internet application) then the links will point to mysite.com/page but you actually access mysite.com/#/page so you don't actually visit the original.

The proper solution here is to use the HTML5 History API, which allows you to change the URL directly and hook into URL changes (so there is no longer a need for hashes). You can read more about the pros and cons of hashes vs hashbangs vs HTML5 History API here: https://github.com/browserstate/history.js/wiki/Intelligent-State-Handling - it also includes sample code to upgrade your website with the HTML5 History API too.

jQuery Mobile is scheduled to use to the HTML5 History API in the future (it's currently being worked on), but for now I'd suggest waiting it this is implemented.

You can always set a class on the link via the ajax callback that shares the style with a:visited.