How to trigger click event on a link using jQuery
  John Mwaniki /   01 Dec 2021

How to trigger click event on a link using jQuery

The purpose of having links on a web page is to make it possible for web visitors to navigate through the website from one page to another or to open and download linked files.

A HTML link is created by simply using anchor <a> tags, putting the destination address/URL in the href attribute and the link text in between the opening and closing tags.

<a href="url">Link text</a>

The link is by default meant to be clicked by the users directly for navigation. However, for some reason, you may have a scenario where you want the link to be clicked indirectly and programmatically when a certain action on the web page occurs.

In such a situation you will need to trigger a click event on a link which can easily be achieved through the use of jQuery click() function.

Here is how to trigger a click event on any HTML element.


$("selector").click();

The "selector" can be an HTML element (eg. a, p, img, etc), a class, or an id for an element.

However, when it comes to links $("a").click(), $("#linkid").click() and $(".linkclass").click() do not work. It's seems like jQuery completely ignores the link href making the click to behave differently from how you would expect it to do.

To work around this, always add a [0] after the bracket containing the selector in order for it to work. Using index [0] will make jQuery Object to regular JS Object which will use the native non-jquery click() method.

Example


$("a")[0].click();

The above will work perfectly and redirect the user to the destination href url as intended. The [0] specifies which link the click event should work on, especially if you have more than one link on the page. In this case, it is the first link on the page that will get clicked since array indexes start with zero (0).

If the page has multiple links and you want to trigger the click event to the second link, use $("a")[1] instead, $("a")[2] for the third link, and so on and so forth.

Adding $("a")[0].click() directly inside the jQuery ready function will result in triggering of the link click event immediately the page loads and thus cause immediate redirection.

To prevent this, you should put the click event trigger code inside a function so as to be triggered only when a certain desired action occurs on the page.

Example

In the code below, we want to trigger the link click event only when someone clicks on the paragraph.

<!DOCTYPE html>
<html>
<head>
<title>Triggering link click event</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<h1>Sample heading here</h1>
<p>Sample paragraph text</p>
<a href="https://www.google.com/">Visit Google</a>
<script>
$(function(){
  $("p").click(function(){
    $("a")[0].click();
  });
});
</script>
</body>
</html>

Clicking on the paragraph above will trigger a click event on the link "Visit Google", and the page will be redirected to the Google homepage.

It is much better to reference the link using its id or class as a selector especially when there are many links as it will be easy to identify it. When using the id as the selector, you reference it with a # eg. "#google". If you use the class selector, reference it with a dot (.) eg ".google".

Example

<!DOCTYPE html>
<html>
<head>
<title>Triggering link click event</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<h1>Sample heading here</h1>
<p>Sample paragraph text</p>
<a id="google" href="https://www.google.com/">Google</a>
<a id="bing" href="https://www.bing.com/">Bing</a>
<a id="duck" href="https://www.duckduckgo.com/">Duckduckgo</a>
<script>
$(function(){
  $("p").click(function(){
    $("#bing")[0].click();
  });
});
</script>
</body>
</html>

Click on the paragraph above will trigger a click event on the link which in turn will redirect the page to Bing's homepage. In this case, you will only have to use array index zero(0) ie. [0] as each link has its own id, and that it's always the first index for that selector.

Method 2

Another of achieving link click trigger in jQuery is to get the value of the <a> tag href attribute, then cause a redirection to it. In this method, we won't need to use array indexes.

The code below will work perfectly.

$(function(){
  $("p").click(function(){
    var url = $("#linkid").attr("href");
    document.location.replace(url);
  });
});

Below is another way to implement the above code:

$(function(){
  $("p").click(function(){
    var url = $("#linkid").attr("href");
    window.location.href = url;
  });
});

That's all! Hopes this helped you.