Using jQuery to programmatically click an <a> link

Question

I know this question has been asked before, but after a search on the web I can't seem to find a straight forward answer.

the HTML

<a id=myAnchor href=index.php>

the jQuery (Both of these do not work)

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

or

$('#myAnchor').trigger('click');

What is the simplest and most efficient way to achieve this?

Click doesn't trigger the default behaviour of the link. This question has been asked many times before. — Rob W
– Rob W, Commented Jan 31, 2012 at 14:44
possible duplicate of Can I call jquery click() to follow an <a> link if I haven't bound an event handler to it with bind or click already? — Rob W
– Rob W, Commented Jan 31, 2012 at 14:45
I hope your HTML doesn't actually look like that. A normal HTML anchor looks like: <a id="myAnchor" href="index.php">Text</a> (with quotes and a proper closing tag). — Cᴏʀʏ
– Cᴏʀʏ, Commented Jan 31, 2012 at 14:46
@Cory: If you're not validating for XHTML, the quotes won't be required for those values. — user1106925
– user1106925, Commented Jan 31, 2012 at 14:48

user229044 · Accepted Answer · 2017-11-19 05:24:12Z

105

Try this:

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

It works for me.

edited Nov 19, 2017 at 5:24

user229044♦

241k41 gold badges347 silver badges350 bronze badges

answered May 28, 2014 at 7:00

user3346133

1,0911 gold badge8 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Maxx Over a year ago

This worked for me when literally nothing else has. Thank you a great deal! +1

user1106925 Over a year ago

This has problems with legacy browsers. Don't use it if you need broad compatibility.

Eric Hepperle - CodeSlayer2010 Over a year ago

Thanks for this! I have been trying to figure out how to programatically click links for years. The gotcha for me was not having that "[0]" in there. What is that called, and why is it necessary?

SGT Grumpy Pants Over a year ago

@EricHepperle-CodeSlayer2010, the [0] is a shorthand for .get(0) which returns the underlying DOM element to which the JQuery object is refers. That allows you to call the .click() method directly on the DOM element, which works, rather than on the jQuery object, which does not work.

Eric Hepperle - CodeSlayer2010 Over a year ago

@10GritSandpaper Aha... thanks for explaining that! I get it now.

|

user1106925 · Accepted Answer · 2012-01-31 14:45:28Z

35

window.location = document.getElementById('myAnchor').href

answered Jan 31, 2012 at 14:45

community wiki

user1106925

4 Comments

Rory McCrossan Over a year ago

I prefer this method personally, as it avoids the need to create a 'faked' event.

OKEEngine Over a year ago

This was once a popular way to redirect to a link, somehow it became a lost ancient technology nowadays :)

Sinstein Over a year ago

@RoryMcCrossan only when the purpose of an anchor is to redirect you. What if it is not? What if it opens a modal? Or sends an ajax request? Or loads a page via pjax?

Rory McCrossan Over a year ago

In those cases then you should just call the function that performs those actions directly, instead of faking a click event on a button.

bang · Accepted Answer · 2012-01-31 15:02:02Z

25

Click just triggers the click event / events not the actually "goto-the-links-href" action.

You have to write your own handler and then your $('#myAnchor').trigger('click'); will work...

$("#myAnchor").click(function(event)
{
  var link = $(this);
  var target = link.attr("target");

  if($.trim(target).length > 0)
  {
    window.open(link.attr("href"), target);
  }
  else
  {
     window.location = link.attr("href");
  }

  event.preventDefault();
});

edited Jan 31, 2012 at 15:02

answered Jan 31, 2012 at 14:54

bang

5,2711 gold badge28 silver badges31 bronze badges

1 Comment

Jon P Over a year ago

My favorite as it addresses the issue of target. Does it trigger pop-up blockers though?

aki · Accepted Answer · 2012-01-31 14:57:41Z

4

<a href="#" id="myAnchor">Click me</a>

<script type="text/javascript">
$(document).ready(function(){
    $('#myAnchor').click(function(){
       window.location.href = 'index.php';
    });
})
</script>

answered Jan 31, 2012 at 14:57

aki

7098 silver badges25 bronze badges

Comments

polkovnikov.ph · Accepted Answer · 2013-10-08 15:35:29Z

4

Add onclick="window.location = this.href" to your <a> element. After this modification it could be .click()ed with expected behaviour. To do so with every link on your page, you can add this:

<script type="text/javascript">
    $(function () {
        $("a").attr("onclick", "window.location = this.href");
    });
</script>

answered Oct 8, 2013 at 15:35

polkovnikov.ph

6,6526 gold badges47 silver badges83 bronze badges

1 Comment

Lionel Over a year ago

Just fyi: Doesn't work in IE7. DIE, IE7, DIE! Otherwise very nice workaround!

Saumil · Accepted Answer · 2014-02-14 08:51:35Z

4

I tried few of the above solutions but they didn't worked for me. Here is a link to the page which worked for me automatically click a link

Above link has many solutions and here's the one which worked for me,

    <button onclick="fun();">Magic button</button>

    <!--The link you want to automatically click-->
    <a href='http://www.ercafe.com' id="myAnchor">My website</a>

Now within the <script> tags,

<script>

     function fun(){
          actuateLink(document.getElementById('myAnchor'));
     }

     function actuateLink(link)
     {
          var allowDefaultAction = true;

          if (link.click)
          {
              link.click();
              return;
          }
          else if (document.createEvent)
          {
              var e = document.createEvent('MouseEvents');
              e.initEvent(
                   'click'     // event type
                   ,true      // can bubble?
                   ,true      // cancelable?
              );
              allowDefaultAction = link.dispatchEvent(e);           
          }

          if (allowDefaultAction)       
          {
              var f = document.createElement('form');
              f.action = link.href;
              document.body.appendChild(f);
              f.submit();
          }
    }

</script>

Copy paste the above code and click on clicking the 'Magic button' button, you will be redirected to ErCafe.com.

edited Feb 14, 2014 at 8:51

answered Feb 14, 2014 at 7:09

Saumil

2,5176 gold badges34 silver badges54 bronze badges

1 Comment

Ness Over a year ago

This is the only thing that worked for my situation! Some people even say the jQuery click simply works--not at all for me. This solution is awesome.

yohan.jayarathna · Accepted Answer · 2020-04-26 06:55:07Z

1

I had similar issue. try this $('#myAnchor').get(0).click();this works for me

answered Apr 26, 2020 at 6:55

yohan.jayarathna

3,44313 gold badges60 silver badges74 bronze badges

Comments

Michael · Accepted Answer · 2016-04-29 08:55:37Z

0

If you are using jQuery, you can do it with jQuery.trigger http://api.jquery.com/trigger/

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.js"></script>
</head>
<body>
    <a id="foo" onclick="action()"></a>
    <script type="text/javascript">
        function action(){
            window.location.replace("http://stackoverflow.com/q/9081426/5526354")
        }

        $("#foo").trigger("click");
    </script>
</body>
</html>

edited Apr 29, 2016 at 8:55

answered Apr 29, 2016 at 8:19

Michael

12k7 gold badges32 silver badges54 bronze badges

Comments

Venkat · Accepted Answer · 2019-02-05 20:16:53Z

0

Try this for compatibility;

<script type="text/javascript">
        $(function() {
            setTimeout(function() {
                window.location.href = $('#myAnchor').attr("href");

            }, 1500);
        });
    </script>

answered Feb 5, 2019 at 20:16

Venkat

1593 bronze badges

Collectives™ on Stack Overflow

Using jQuery to programmatically click an <a> link

9 Answers 9

7 Comments

4 Comments

1 Comment

Comments

1 Comment

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

7 Comments

4 Comments

1 Comment

Comments

1 Comment

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related