CODEWITHSUNDEEP
javascriptjqueryonclick
ankit
ankit

Reputation: 1333

Simulating a click in jQuery/JavaScript on a link

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?

Upvotes: 75

Views: 247115

Answers (7)

tanathos
tanathos

Reputation: 5606

trigger("click") replaces .click() which is deprecated since jQuery 3.3.

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

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

Upvotes: 43

weisk
weisk

Reputation: 2540

Why not just the good ol' javascript?

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

Upvotes: 55

Yashpal Singla
Yashpal Singla

Reputation: 1994

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");

Upvotes: 9

sergeych
sergeych

Reputation: 869

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.

Upvotes: 0

Jan Hančič
Jan Hančič

Reputation: 53930

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.

Upvotes: 66

kgiannakakis
kgiannakakis

Reputation: 104168

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.

Upvotes: 1

Rob Grant
Rob Grant

Reputation: 7348

Easy! Just use jQuery's click function:

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

Upvotes: 9

Related Questions