jQuery: how to trigger anchor link's click event

Question

I have a anchor link like

<a id="myanchor" href="http://google.com" target="_blank">Google</a>

How to open href target in a new tab programatically?

using `_blank` will automatically open in new tab , where is the problem dude?? — xkeshav, May 20 '11 at 06:42
links, by default standard action, open your `href` on a click. why do you want to do this via Javascript? — Richard Neil Ilagan, May 20 '11 at 06:45
Anyone knows why both $('#myanchor').click(); // OR $('#myanchor').trigger('click'); doesn't automatically click the link — Ram, Nov 30 '12 at 15:52
@Ram because probably the element `#myanchor` hasn't had a click event handler bound to it, so there is nothing to call. — user692942, Mar 08 '19 at 13:34

score 119 · Accepted Answer · answered Sep 06 '13 at 09:39

119

Try the following:

$("#myanchor")[0].click()

As simple as that.

answered Sep 06 '13 at 09:39

Igor G.

6,955
6
26
26

thats right! reference: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.click – Mar 27 '14 at 19:12
1

it kindof works, but in firefox and chrome, if the link is used to download something (this was not the op question but still) with target="_blank", the browser blocks the popup (depending on its configuration), which is not EXACTLY the same as if a human user was clicking with it with the mouse (no block). – ling Oct 18 '14 at 19:08
3

This works by calling the native (non-jQuery) click function of the first element (0-th) in the set of #myanchor jQuery objects. – Matthew Oct 10 '15 at 12:42

score 26 · Answer 2 · answered May 20 '11 at 06:41

26

There's a difference in invoking the click event (does not do the redirect), and navigating to the href location.

Navigate:

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

Open in new tab or window:

 window.open($('#myanchor').attr('href'));

invoke click event (call the javascript):

 $('#myanchor').click();

answered May 20 '11 at 06:41

GvS

52,015
16
101
139

Navigate is fine but i need to open href in a new tab. when i user window.location it is opening in the same tab. – Venkat Papana May 20 '11 at 13:32
@Venkat: try the `window.open` in the next example – GvS May 20 '11 at 13:50
People need to read properly. If you are trying to call `$(...).click();` on an element that hasn't had the click event handler bound, triggering the jQuery `click()` will do nothing. If you are trying to automatically click an anchor tag give it an `id` like `myanchor` and use the third example `$('#myanchor').click();`. – user692942 Mar 08 '19 at 13:32
window.location = $('#myanchor').attr('href') worked perfectly for an anchor that I had within the same page. I had at the top of the page, elsewhere, then used your trick to cause the page to move to the anchor point. – David Hicks Sep 23 '20 at 20:24

score 20 · Answer 3 · answered Aug 28 '12 at 20:09

Even though this post is caput, I think it's an excellent demonstration of some walls that one can run into with jQuery, i.e. thinking click() actually clicks on an element, rather than just sending a click event bubbling up through the DOM. Let's say you actually need to simulate a click event (i.e. for testing purposes, etc.) If that's the case, provided that you're using a modern browser you can just use HTMLElement.prototype.click (see here for method details as well as a link to the W3 spec). This should work on almost all browsers, especially if you're dealing with links, and you can fall back to window.open pretty easily if you need to:

var clickLink = function(linkEl) {
  if (HTMLElement.prototype.click) {
    // You'll want to create a new element so you don't alter the page element's
    // attributes, unless of course the target attr is already _blank
    // or you don't need to alter anything
    var linkElCopy = $.extend(true, Object.create(linkEl), linkEl);
    $(linkElCopy).attr('target', '_blank');
    linkElCopy.click();
  } else {
    // As Daniel Doezema had said
    window.open($(linkEl).attr('href'));
  }
};

Hi there, How do you call this?
var linkEl = 'http://www.google.com'; clickLink();
Thanks, dennis — Dennis, Dec 08 '13 at 18:25
@Dennis `clickLink($('#myanchor'));` or try `clickLink($('#myanchor')[0]);` — BumbleB2na, Jan 02 '14 at 21:23

score 2 · Answer 4 · answered Jan 13 '16 at 04:21

2

 window.open($('#myanchor').attr('href'));

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

answered Jan 13 '16 at 04:21

Jobelle

2,717
1
15
26

`$('#myanchor')[0].click` is undefined, because subscripting removes the jQuery decorator. You have to use either `$($('#myanchor')[0]).click();` or `$('#myanchor').first().click();`. – Julian Jan 19 '16 at 08:33

score 1 · Answer 5 · edited Jul 25 '18 at 10:22

1

It worked for me:

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

edited Jul 25 '18 at 10:22

Failed Scientist

1,977
3
29
48

answered Jul 25 '18 at 09:24

Vinod Poorma

419
1
6
15

score 0 · Answer 6 · answered Apr 30 '16 at 17:59

$(":button").click(function () {                
                $("#anchor_google")[0].click();
            });

First, find the button by type(using ":") if id is not given.
Second,find the anchor tag by id or in some other tag like div and $("#anchor_google")[0] returns the DOM object.

Abdul Kader · Answer 7 · 2019-07-11T05:59:19.027

-1

You cannot open in a new tab programmatically, it's a browser functionality. You can open a link in an external window . Have a look here

edited Jul 11 '19 at 05:59

answered May 20 '11 at 06:45

Abdul Kader

5,781
4
22
40

1

then what if user disable popus? – Venkat Papana May 20 '11 at 13:39
Please include the contents of the link. The link is no longer valid – Jonathan Jul 10 '19 at 08:23

jQuery: how to trigger anchor link's click event

7 Answers7

Linked

Related