Using jQuery to programmatically click an 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, Jan 31 '12 at 14:44
possible duplicate of [Can I call jquery click() to follow an link if I haven't bound an event handler to it with bind or click already?](http://stackoverflow.com/questions/1694595/can-i-call-jquery-click-to-follow-an-a-link-if-i-havent-bound-an-event-hand) — Rob W, Jan 31 '12 at 14:45
duplicate: http://stackoverflow.com/questions/2053598/jquery-click-doesnt-work-on-hyperlink — fyr, Jan 31 '12 at 14:46
I hope your HTML doesn't actually look like that. A normal HTML anchor looks like: `Text` (with quotes and a proper closing tag). — Cᴏʀʏ, Jan 31 '12 at 14:46
@Cory: If you're not validating for XHTML, the quotes won't be required for those values. — , Jan 31 '12 at 14:48
@amnotiam: I know it's permitted to omit them, but the [HTML spec](http://www.w3.org/TR/REC-html40/intro/sgmltut.html#h-3.2.2) does encourage them. — Cᴏʀʏ, Jan 31 '12 at 14:51

score 105 · Answer 1 · edited Nov 19 '17 at 05:24

105

Try this:

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

It works for me.

edited Nov 19 '17 at 05:24

user229044

232,980
40
330
338

answered May 28 '14 at 07:00

user3346133

1,091
1
8
6

1

This worked for me when literally nothing else has. Thank you a great deal! +1 – Maxx Dec 04 '14 at 20:27
3

This has problems with legacy browsers. Don't use it if you need broad compatibility. – Jun 26 '15 at 19:14
I was looking for a Greasemonkey way, and this worked! Many thanks. – Henrique de Sousa Dec 26 '15 at 15:14
1

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? – Eric Hepperle - CodeSlayer2010 May 08 '16 at 20:29
Worked for me in IE Edge. – zuluk Oct 11 '16 at 13:01
3

@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. – SGT Grumpy Pants Feb 09 '17 at 17:29
1

@10GritSandpaper Aha... thanks for explaining that! I get it now. – Eric Hepperle - CodeSlayer2010 Feb 10 '17 at 17:57

score 35 · Answer 2 · answered Jan 31 '12 at 14:45

35

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

answered Jan 31 '12 at 14:45

1

I prefer this method personally, as it avoids the need to create a 'faked' event. – Rory McCrossan Jun 26 '15 at 17:33
2

This was once a popular way to redirect to a link, somehow it became a lost ancient technology nowadays :) – OKEEngine Jul 22 '15 at 17:59
@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? – Sinstein Dec 23 '15 at 09:11
1

In those cases then you should just call the function that performs those actions directly, instead of faking a click event on a button. – Rory McCrossan Dec 23 '15 at 09:17

bang · Answer 3 · 2012-01-31T15:02:02.160

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 '12 at 15:02

answered Jan 31 '12 at 14:54

bang

4,982
1
24
28

1

My favorite as it addresses the issue of target. Does it trigger pop-up blockers though? – Jon P Jul 31 '12 at 06:19

score 4 · Answer 4 · answered Oct 08 '13 at 15:35

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 08 '13 at 15:35

polkovnikov.ph

6,256
6
44
79

Just fyi: Doesn't work in IE7. DIE, IE7, DIE! Otherwise very nice workaround! – Lionel Oct 05 '15 at 13:07

Saumil · Answer 5 · 2014-02-14T08:51:35.497

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.

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. — Ness, Jun 30 '14 at 17:26

score 4 · Answer 6 · answered Jan 31 '12 at 14:57

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 '12 at 14:57

aki

699
7
25

score 1 · Answer 7 · answered Apr 26 '20 at 06:55

1

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

answered Apr 26 '20 at 06:55

yohan.jayarathna

3,423
13
56
74

Mikhail · Answer 8 · 2016-04-29T08:55:37.363

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>

score 0 · Answer 9 · answered Feb 05 '19 at 20:16

0

Try this for compatibility;

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

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

answered Feb 05 '19 at 20:16

Venkat

157
3

Using jQuery to programmatically click an link

9 Answers9

Linked

Related