60

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?

5
  • using _blank will automatically open in new tab , where is the problem dude??
    – xkeshav
    May 20, 2011 at 6:42
  • links, by default standard action, open your href on a click. why do you want to do this via Javascript? May 20, 2011 at 6:45
  • 2
    i need to trigger this click prgramatically on page load... May 20, 2011 at 13:31
  • 2
    Anyone knows why both $('#myanchor').click(); // OR $('#myanchor').trigger('click'); doesn't automatically click the link
    – Ram
    Nov 30, 2012 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 8, 2019 at 13:34

7 Answers 7

120

Try the following:

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

As simple as that.

3
  • thats right! reference: developer.mozilla.org/en-US/docs/Web/API/HTMLElement.click
    – user669677
    Mar 27, 2014 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, 2014 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, 2015 at 12:42
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();
4
  • 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. May 20, 2011 at 13:32
  • @Venkat: try the window.open in the next example
    – GvS
    May 20, 2011 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 8, 2019 at 13:32
  • window.location = $('#myanchor').attr('href') worked perfectly for an anchor that I had within the same page. I had <a name="somename"></a> at the top of the page, <a id="myanchor" href="somename"></a> elsewhere, then used your trick to cause the page to move to the anchor point. Sep 23, 2020 at 20:24
20

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'));
  }
};
2
  • Hi there, How do you call this? <pre><code>var linkEl = 'google.com'; clickLink();</code></pre> Thanks, dennis
    – Dennis
    Dec 8, 2013 at 18:25
  • @Dennis clickLink($('#myanchor')); or try clickLink($('#myanchor')[0]);
    – BumbleB2na
    Jan 2, 2014 at 21:23
2
 window.open($('#myanchor').attr('href'));

               $('#myanchor')[0].click();
1
  • $('#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, 2016 at 8:33
1

It worked for me:

     window.location = $('#myanchor').attr('href');
0
$(":button").click(function () {                
                $("#anchor_google")[0].click();
            });
  1. First, find the button by type(using ":") if id is not given.
  2. Second,find the anchor tag by id or in some other tag like div and $("#anchor_google")[0] returns the DOM object.
-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

2
  • 1
    then what if user disable popus? May 20, 2011 at 13:39
  • Please include the contents of the link. The link is no longer valid
    – Jonathan
    Jul 10, 2019 at 8:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.