Simulate a click on 'a' element using javascript/jquery

Question

I am trying to simulate a click on on an element. HTML for the same is as follows

<a id="gift-close" href="javascript:void(0)" class="cart-mask-close p-abs" onclick="_gaq.push(['_trackEvent','voucher_new','cart',$(this).attr('rel')+'-mask_x_button-inaction']);" rel="coupon">&nbsp;</a>

How can i simulate a click on it. I have tried

document.getElementById("gift-close").click();

But its not doing anything

Where are you doing document.getElementById("gift-close").click(); from? It will work if you do it from an onload handler (or otherwise ensure the <a> element exists): jsfiddle.net/LKNYg — nnnnnn
– nnnnnn, Commented Jul 10, 2013 at 11:06
If you are really using jQuery, this is one of the most basic things you learn first. Please check out jQuery Fundamentals to learn more. — mekwall
– mekwall, Commented Jul 10, 2013 at 11:08
Please, just please do not write href="javascript:void(0)". It has critical SEO issues. — AmerllicA
– AmerllicA, Commented Apr 15, 2017 at 11:38
Please note that user-click and triggered programmed click work differently. stackoverflow.com/questions/11127908/… — Sunil Kumar
– Sunil Kumar, Commented Nov 25, 2019 at 8:55

André Dion · Accepted Answer · 2014-08-13 17:45:21Z

150

Using jQuery: $('#gift-close').trigger('click');

Using JavaScript: document.getElementById('gift-close').click();

edited Aug 13, 2014 at 17:45

answered Jul 10, 2013 at 11:06

André Dion

21.8k7 gold badges59 silver badges60 bronze badges

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

4 Comments

425nesp Over a year ago

document.getElementById('gift-close').onClick(); doesn't work in Chrome, Firefox, or Safari. However, changing onClick() to click() does work.

user3714134 Over a year ago

Didn't the asker explicity say that this doesn't work? I don't understand the upvotes.

André Dion Over a year ago

@HugoZink because it does work..? Did you try anything before downvoting/commenting?

user3714134 Over a year ago

@AndréDion I did, and it does not seem to work in Firefox. Probably due to security concerns.

Alex Guerra · Accepted Answer · 2013-07-10 11:06:08Z

21

Using jQuery:

$('#gift-close').click();

answered Jul 10, 2013 at 11:06

Alex Guerra

3201 silver badge6 bronze badges

9 Comments

nnnnnn Over a year ago

Why would that work when document.getElementById("gift-close").click(); didn't?

Alex Guerra Over a year ago

Because document.getElementById("gift-close") is not a jQuery object but a DOM object. You could try this too: $(document.getElementById("gift-close")).click();

nnnnnn Over a year ago

@techfoobar and Alex, DOM elements have a .click() method. jsfiddle.net/LKNYg

techfoobar Over a year ago

@nnnnnn - Wow! Totally new info for me.. Never knew that.. Tks :-)

Alex Guerra Over a year ago

Oh, yes. You're right. Then the problem is that he should execute click code after page loading, i.e. in onReady event ;)

|

ihor marusyk · Accepted Answer · 2013-07-10 11:34:14Z

17

Try to use document.createEvent described here https://developer.mozilla.org/en-US/docs/Web/API/document.createEvent

The code for function that simulates click should look something like this:

function simulateClick() {
  var evt = document.createEvent("MouseEvents");
  evt.initMouseEvent("click", true, true, window,
    0, 0, 0, 0, 0, false, false, false, false, 0, null);
  var a = document.getElementById("gift-close"); 
  a.dispatchEvent(evt);      
}

answered Jul 10, 2013 at 11:34

ihor marusyk

2,0901 gold badge13 silver badges12 bronze badges

3 Comments

ihor marusyk Over a year ago

Also look at this question stackoverflow.com/questions/15951468/… this describes newer approach to creating custom events.

Humayun Over a year ago

Wow awesom! I just tried your solution to upvote your answer and it really works:) If anyone want to try? Do this in console.... var evt = document.createEvent("MouseEvents"); evt.initMouseEvent("click", true, true, window,0, 0, 0, 0, 0, false, false, false, false, 0, null); var a = $('div#answer-17569610 a.vote-up-off').get(0); a.dispatchEvent(evt);

Ellert van Koperen Over a year ago

Change "document.createEvent" to "new CustomEvent" to conform to new standards. This is the better solution, as it realy simulates a click, which sometimes is not the same as simply firing the onClick event. Especially if the element is doing 2 things, like opening a link (in a new window?) and handling the Click event (to do something on the same page). Thanks Ihor.

ravo10 · Accepted Answer · 2017-10-23 00:56:01Z

Code snippet underneath!

Please take a look at these documentations and examples at MDN, and you will find your answer. This is the propper way to do it I would say.

Creating and triggering events

Dispatch Event (example)

Taken from the 'Dispatch Event (example)'-HTML-link (simulate click):

function simulateClick() {

  var evt = document.createEvent("MouseEvents");

  evt.initMouseEvent("click", true, true, window,
    0, 0, 0, 0, 0, false, false, false, false, 0, null);

  var cb = document.getElementById("checkbox"); 
  var canceled = !cb.dispatchEvent(evt);

  if(canceled) {
    // A handler called preventDefault
    alert("canceled");
  } else {
    // None of the handlers called preventDefault
    alert("not canceled");
  }
}

This is how I would do it (2017 ..) :

Simply using MouseEvent.

function simulateClick() {

    var evt = new MouseEvent("click");

    var cb = document.getElementById("checkbox");
    var canceled = !cb.dispatchEvent(evt);

    if (canceled) {
        // A handler called preventDefault
        console.log("canceled");
    } else {
        // None of the handlers called preventDefault
        console.log("not canceled");
    }
}

document.getElementById("button").onclick = evt => {
    
    simulateClick()
}

function simulateClick() {

    var evt = new MouseEvent("click");

    var cb = document.getElementById("checkbox");
    var canceled = !cb.dispatchEvent(evt);

    if (canceled) {
        // A handler called preventDefault
        console.log("canceled");
    } else {
        // None of the handlers called preventDefault
        console.log("not canceled");
    }
}

<input type="checkbox" id="checkbox">
<br>
<br>
<button id="button">Check it out, or not</button>

nnnnnn · Accepted Answer · 2013-07-10 11:20:22Z

9

The code you've already tried:

document.getElementById("gift-close").click();

...should work as long as the element actually exists in the DOM at the time you run it. Some possible ways to ensure that include:

Run your code from an onload handler for the window. http://jsfiddle.net/LKNYg/
Run your code from a document ready handler if you're using jQuery. http://jsfiddle.net/LKNYg/1/
Put the code in a script block that is after the element in the source html.

So:

$(document).ready(function() {
    document.getElementById("gift-close").click();
    // OR
    $("#gift-close")[0].click();
});

edited Jul 10, 2013 at 11:20

answered Jul 10, 2013 at 11:15

nnnnnn

150k30 gold badges210 silver badges247 bronze badges

3 Comments

user2373137 Over a year ago

I want to make the inline onclick handler execute

nnnnnn Over a year ago

Right. And that happens in both of the jsfiddle demos I provided.

user2986756 Over a year ago

The trick I found (compared to the "best" answer) was to use the [0]. That caused the script to work.

Farid Imranov · Accepted Answer · 2013-07-10 11:07:55Z

2

Use this code to click:

$("#gift-close").click();

answered Jul 10, 2013 at 11:07

Farid Imranov

2,0952 gold badges19 silver badges32 bronze badges

2 Comments

nnnnnn Over a year ago

Why would that work when document.getElementById("gift-close").click(); didn't?

Farid Imranov Over a year ago

You have to run your code from onload handler for javascript, or $(document).ready(function(){//write code here}) for JQuery

user2549616 · Accepted Answer · 2013-07-10 11:16:34Z

-3

Here, try this one:

$('#gift-close').on('click', function () {
    _gaq.push(['_trackEvent','voucher_new','cart',$(this).attr('rel')+'-mask_x_button-inaction']);
});

answered Jul 10, 2013 at 11:16

user2549616

Comments

Neo · Accepted Answer · 2019-01-14 20:57:21Z

-3

Try adding a function inside the click() method.

$('#gift-close').click(function(){
  //do something here
});

It worked for me with a function assigned inside the click() method rather than keeping it empty.

answered Jan 14, 2019 at 20:57

Neo

8371 gold badge13 silver badges26 bronze badges

1 Comment

Tudor Over a year ago

this is a click event listener, not a click event trigger

Collectives™ on Stack Overflow

Simulate a click on 'a' element using javascript/jquery

8 Answers 8

4 Comments

9 Comments

3 Comments

Comments

3 Comments

2 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

4 Comments

9 Comments

3 Comments

Comments

3 Comments

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related