Simulating a click in jQuery/JavaScript on a link

JavascriptJqueryOnclick

Javascript Problem Overview


I want to simulate a click on any link on a page using JavaScript. If that link has some function binded to its 'onclick' event (by any other JS I don't have any control over), then that function must be called otherwise the link should behave in the normal manner and open a new page.

I am not sure that just checking the value of the 'onclick' handler would suffice. I want to build this so that it works on any link element.

I have no control over what function maybe binded to the onclick event of the link using whichever JS library (not necessarily jQuery) or by simply using JavaScript.

EDIT: With the help of the answers below, it looks like it is possible to check for event handlers attached using jQuery or using the onclick attribute. How do I check for event handlers attached using addEventListener / any other JS library so that it is foolproof?

Javascript Solutions


Solution 1 - Javascript

You can use the the click function to trigger the click event on the selected element.

Example:

$( 'selector for your link' ).click ();

You can learn about various selectors in jQuery's documentation.

EDIT: like the commenters below have said; this only works on events attached with jQuery, inline or in the style of "element.onclick". It does not work with addEventListener, and it will not follow the link if no event handlers are defined. You could solve this with something like this:

var linkEl = $( 'link selector' );
if ( linkEl.attr ( 'onclick' ) === undefined ) {
	document.location = linkEl.attr ( 'href' );
} else {
	linkEl.click ();
}

Don't know about addEventListener though.

Solution 2 - Javascript

Why not just the good ol' javascript?

$('#element')[0].click()

Solution 3 - Javascript

Just

$("#your_item").trigger("click");

using .trigger() you can simulate many type of events, just passing it as the parameter.

Solution 4 - Javascript

Easy! Just use jQuery's click function:

$("#theElement").click();

Solution 5 - Javascript

Try this

function submitRequest(buttonId) {
	if (document.getElementById(buttonId) == null
			|| document.getElementById(buttonId) == undefined) {
		return;
	}
	if (document.getElementById(buttonId).dispatchEvent) {
		var e = document.createEvent("MouseEvents");
		e.initEvent("click", true, true);
		document.getElementById(buttonId).dispatchEvent(e);
	} else {
		document.getElementById(buttonId).click();
	}
}

and you can use it like

submitRequest("target-element-id");

Solution 6 - Javascript

At first see this question to see how you can find if a link has a jQuery handler assigned to it.

Next use:

$("a").attr("onclick")

to see if there is a javascript event assigned to it.

If any of the above is true, then call the click method. If not, get the link:

$("a").attr("href")

and follow it.

I am afraid I don't know what to do if addEventListener is used to add an event handler. If you are in charge of the full page source, use only jQuery event handlers.

Solution 7 - Javascript

All this might not help say when you use rails remote form button to simulate click to. I tried to port nice event simulation from prototype here: my snippets. Just did it and it works for me.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionankitView Question on Stackoverflow
Solution 1 - JavascriptJan HančičView Answer on Stackoverflow
Solution 2 - JavascriptweiskView Answer on Stackoverflow
Solution 3 - JavascripttanathosView Answer on Stackoverflow
Solution 4 - JavascriptRob GrantView Answer on Stackoverflow
Solution 5 - JavascriptYashpal SinglaView Answer on Stackoverflow
Solution 6 - JavascriptkgiannakakisView Answer on Stackoverflow
Solution 7 - JavascriptsergeychView Answer on Stackoverflow