Simulate a click on an "a" element using javascript / jquery

Question

I am trying to simulate a click 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 tried

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

But does nothing

Answer 1

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

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

Answer 2

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

The code for a function that simulates clicks 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); } 

Answer 3

Using jQuery:

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

Answer 4

Code you have already tried:

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

... should work as long as the element actually exists in the DOM at the time of its launch. Some possible ways of providing include:

• Run the code from the onload handler for the window. http://jsfiddle.net/LKNYg/
• Run your code from the document handler if you are using jQuery. http://jsfiddle.net/LKNYg/1/
• Put the code in the script block, which is located after the element in the source html.

So:

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

Answer 5

to try:

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

or jQuery:

 $("#gift-close")[0].onclick(); 

Answer 6

Use this code to click:

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

Answer 7

Code snapshot below!

Please take a look at these documents and examples on MDN and you will find the answer. This is the way I would say it.

Create and fire events

Event dispatch (example)

Adapted from the "Dispatch event (example)" - HTML link (simulate a 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"); } } 

Here is how I did it (2017):

Just 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> 

Answer 8

Here try the following:

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