How to identify if an ` <a>` has been visited or not in jquery

Question

Hi All, Want to know , How to identify if an <a> has been visited or not in jquery. i.e.

if(`<a> has been visited`)
{
   //execute this code
}
else
{
   //execute that code
}

Answer 1

If you mean to check somewhere in the code if the link has been clicked at any given time, just use a variable.

var aClicked = false;
$('identifier to the a').click(function() {aClicked = true});

At the point you want to do the check:

if( aClicked ) {
}

Answer 2

Are you looking for the click event?

Answer 3

$('a').click(function(e) {
    e.preventDefault()
    if( !$(this).data('clicked') ) {
       $(this).data('clicked', 1);
       something();
    }
});

Answer 4

OK....let's do this simple by using class attributes.

In jQuery

$('a').click(function() {
   if (!$(this).hasClass("clicked")) {
     $(this).addClass("clicked");
   }
   //You can toggle by doing this 
   //else  {
   //  $(this).removeClass("clicked");
   //}

   if ($(this).hasClass("clicked")) {
     //Do Stuff....
   }
});

that way, you can iterate through <a> and check if $(this).hasClass("clicked")) like this:

$('a').each(function() {
  if ($(this).hasClass("clicked")) {
     //Do Stuff....
   }
});

Answer 5

If I understand correctly you want to detect links (on the page) that user visited previously (either from this or from any other page), right?

I believe there is no 100% way but this hack might help. It goes like this: First you set up your CSS so that there is a distinction between a:link and a:visited which you later use to measure for each link.

For example, you can set-up CSS like this:

a, a:link { margin: 0 }
a:visited { margin-bottom: 1px }

Then if your html is this (clearly stackoverflow.com is visited, and other garbage link is not):

<a href="http://stackoverflow.com"&gt;stackoverflow.com&lt;/a&gt;&lt;br&gt;
<a href="http://fjhgsfljhgsljf"&gt;some unvisited link</a>​

You measure them with this script:

​$('a').each(function () {
    var isClicked = !!parseInt($(this).css('margin-bottom'));
    alert('Is ' + $(this).text() + ' visited: ' + isClicked);
});​​​​​​​​​​​​​​

(!!parseInt('1px') yields true and !!parseInt('0px') yields false)

I chose margin-bottom measurable as it makes no visual distinction in my case. You may chose something else.