Simulate a click on 'a' element using javascript/jquery
JavascriptJqueryHyperlinkClickSimulateJavascript Problem Overview
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"> </a>
How can i simulate a click on it. I have tried
document.getElementById("gift-close").click();
But its not doing anything
Javascript Solutions
Solution 1 - Javascript
Using jQuery: $('#gift-close').trigger('click');
Using JavaScript: document.getElementById('gift-close').click();
Solution 2 - Javascript
Using jQuery:
$('#gift-close').click();
Solution 3 - Javascript
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);
}
Solution 4 - Javascript
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
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>
Solution 5 - Javascript
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();
});
Solution 6 - Javascript
Use this code to click:
$("#gift-close").click();
Solution 7 - Javascript
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.
Solution 8 - Javascript
Here, try this one:
$('#gift-close').on('click', function () {
_gaq.push(['_trackEvent','voucher_new','cart',$(this).attr('rel')+'-mask_x_button-inaction']);
});