How to Trigger a Link's (Or Any Element'S) Click Event Through JavaScript

How can I trigger a JavaScript event click

Performing a single click on an HTML element: Simply do element.click(). Most major browsers support this.

To repeat the click more than once: Add an ID to the element to uniquely select it:

<a href="#" target="_blank" id="my-link" onclick="javascript:Test('Test');">Google Chrome</a>

and call the .click() method in your JavaScript code via a for loop:

var link = document.getElementById('my-link');
for(var i = 0; i < 50; i++)
   link.click();

click one element to trigger another's link

Your JS should look like this:

var clickThis = '.clickThis';
var link = '.link';

$(clickThis).click(function(){
    $(link).css({"color": "red"});
    $(link)[0].click();
});

Remember when you select classes they return more than one element, so jQuery won't know which element to click, in your case you only have one element with that class but you still need to say which one, with [0].

Working jsfiddle sample:

http://jsfiddle.net/qf0ta0cx/1/

I added target="_blank" in the a tag just to test it without refreshing the page everytime I click it but opening the link in a new tab, you can remove it according to your preference.

Can't trigger click event on a link

Try changing the location of the page:

document.location = $("#" + id).attr('href');

How to trigger a click of that 'link' on click of anywhere in that row?

To trigger that particular row's anchor tag onclick of that row, this is what worked:

$(document).on('click', '.rowclass', function() {
    $(this).children().find('a span').trigger('click');
    //go to td then find <a> <span> to trigger click

});

This may not be the best of solutions. I'm new to coding, so if there's a better way I would be happy to know about it. Cheers!

Link within a link onClick event - Avoid both click events triggering

Javascript events will propagate up through the tree.

So when you click on the inner anchor it will also emit any click events for elements higher up, so the div element.

To stop this the inner click handler has to prevent the event from propagating with e.stopPropagation();.

However this gets a little messy when you don't register handlers with .addEventListener() in JavaScript.

If you add events this way you can do it like this (first give your anchor an id, say inner) which is nice and easy:

document.getElementById('inner').addEventListener('click', function (e) {
    e.stopPropagation();
    console.log(2);
});

You can however pass the event into your click handler if you do wish to use the attribute, so:

<a href="#" onClick="innerHandler(event)">Inner</a>

//JS
function innerHandler(e) {
    e.stopPropagation();
    console.log(2);
}

Generally speaking (this is my opinion) i would avoid the latter. Events registered like this are difficult to remove and modify. You can't also easily register multiple handlers to the same element for the same event.

stopPropagation docs

How to trigger a click on a link using jQuery

If you are trying to trigger an event on the anchor, then the code you have will work I recreated your example in jsfiddle with an added eventHandler so you can see that it works:

$(document).on("click", "a", function(){
    $(this).text("It works!");
});

$(document).ready(function(){
    $("a").trigger("click");
});

Are you trying to cause the user to navigate to a certain point on the webpage by clicking the anchor, or are you trying to trigger events bound to it? Maybe you haven't actually bound the click event successfully to the event?

Also this:

$('#titleee').find('a').trigger('click');

is the equivalent of this:

$('#titleee a').trigger('click');

No need to call find. :)

Trigger a click event into a click handler on links

$("#downloadReport").click(); will trigger the jquery handler attached to it. You need to use dom click event inorder to redirect to the new href. Use like this

$("#downloadReport")[0].click();

Trigger a click event on an inner element

This worked well:

$("table tr").click(function(e) {
    var $link = $(this).find("a");

    if (e.target === $link[0]) return false;

    $link.trigger('click');
    return false;
});

EDIT:

Why most solutions don't work — they fail, because when the link was clicked, the immediate handler attached runs. The event then bubbles to see if a handler was attached to a table cell, row, etc.

When you suggest triggering a click you cause the recursion: the link was clicked → fancybox → bubbles → aha! table row → trigger the link click → the link was clicked…

When you suggest to stop propagation, please note that event stops bubbling to parent elements, so a click handler attached to body will not be executed.

Why the code above works — we check if the event bubbled from a link. If true, we simply return and stop further propagation.

See the updated fiddle: http://jsfiddle.net/F5aMb/28/