Trigger click event of an anchor tag with JavaScript/jQuery

This post will discuss how to trigger the click event of an anchor tag in JavaScript and jQuery.

1. Using jQuery

The idea is to use jQuery’s .click() method to trigger the “click” JavaScript event on an element. This is demonstrated below:

JS

$(document).ready(function() {

$('#submit').click(function() {

$('#search_link')[0].click();

})

});

HTML

<!doctype html>

<body>

<a id="search_link" href="https://www.bing.com/">Click Me</a>

<div>

<button id="submit">Click Anchor</button>

</div>

</body>

</html>

Edit in JSFiddle

Note that $('selector')[0] is used, as $('selector') returns a jQuery object.

Alternatively, if you want to simply navigate to the href location, you can get the href value and assign it to the window.location object. The URL would then be loaded as if location.assign() had been called with the URL.

JS

$(document).ready(function() {

$('#submit').click(function() {

window.location = $('#search_link').attr('href');

})

});

HTML

<!doctype html>

<body>

<a id="search_link" href="https://www.bing.com/">Click Me</a>

<div>

<button id="submit">Click Anchor</button>

</div>

</body>

</html>

Edit in JSFiddle

To open the URL in a new window or tab, you can use the Window interface’s open() method.

JS

$(document).ready(function() {

$('#submit').click(function() {

var url = $('#search_link').attr('href');

window.open(url);

})

});

HTML

<!doctype html>

<body>

<a id="search_link" href="https://www.bing.com/">Click Me</a>

<div>

</div>

</body>

</html>

Edit in JSFiddle

2. Using JavaScript

With pure JavaScript, you can trigger the “click” JavaScript event on an element, as shown below:

JS

document.getElementById('submit').onclick = function() {

document.getElementById('search_link').click();

}

HTML

<!doctype html>

<body>

<a id="search_link" href="https://www.bing.com/">Click Me</a>

<div>

<button id="submit">Click Anchor</button>

</div>

</body>

</html>

Edit in JSFiddle

Alternatively, to navigate to the href location, you can assign the href value to the location object. To open in a new window or tab, you can use the window.open() method.

JS

document.getElementById('submit').onclick = function() {

var url = document.getElementById('search_link').href;

window.open(url);

}

HTML

<!doctype html>

<body>

<a id="search_link" href="https://www.bing.com/">Click Me</a>

<div>

</div>

</body>

</html>

Edit in JSFiddle

That’s all about triggering the click event of an anchor tag with JavaScript and Query.