How to trigger a click on a link using jQuery

Question

I have a link:

<ul id="titleee" class="gallery">
  <li>
    <a href="#inline" rel="prettyPhoto">Talent</a>
  </li>
</ul>

and I am trying to trigger it by using:

$(document).ready(function() {
  $('#titleee').find('a').trigger('click');
});

But it doesn't work.

I've also tried: $('#titleee a').trigger('click');

Edit:

I actually need to trigger whatever get's called here <a href="#inline" rel="prettyPhoto">

Presignify

location.href($('#titleee').find('a').attr("href")); ? – Papyrus

or even $('ul.gallery').find('li>a').trigger('click'); – Clotheshorse

Guys. The real answer is so simple. $('#titleee a')[0].click();. In other words, use the DOM click method, not the jQuery one. Upvote Graham Hotchkiss! – Lozada

@romkyns no its not right as its opening a pop up instead of new tab. but clicking on a dummy span inside this 'a' tag serves the purpose – Junkie

If you are trying to trigger an event on the anchor, then the code you have will work.$('ul#titleee li a[href="#inline"]').click(); – Skiagraph

upvoted Roman Starkov's comment: if it is rails_ujs like: $('a.show').on("ajax:success"), triggering a click only works using the DOM element click() function – Croatian

Answer 1

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. :)

Wakeless

@Kit .find() is a faster selector than what you are proposing, do a benchmark if you disagree but your proposal slows it down. positively :-) – Colostomy

@mashappslabs - That's okay. I'm happy for you if you feel the need to do premature and micro optimizations, no matter how true it is. :) – Wakeless

@Kit... so when you are making a statement such as "no need to call find", it does not fall into the realm of premature optimization?? I think it does but it just happens to be slower than what was proposed at first. I'm not responding for the sake of argument, but for a concerted effort to get better at what we all love doing. I hope this comes out right :-) – Colostomy

@mashappslabs - It doesn't qualify because that's how you would normally type that selector, it's the default case. Someone who don't write code like that are probably unaware you can chain in a selector. I would for that matter be very surprised if it was slower as a general case and especially in browsers with a native query selector, but I reject your call for me to prove you wrong without you first supplying proof, on the basis of the null hypothesis. I also think it's the compilers (jQuerys) issue to deal with at this abstraction layer, unless it's a practical issue in the single case. – Wakeless

@mashappslabs - Having seen jsperf.com for the first time I thought I'd come back and say you are right, your method is faster in the general case. Only Opera is slower. jsperf.com/jquery-selector-perf-right-to-left/32 – Wakeless

you know what is funny @Kit, we have the exact same tumblr theme, how random is that, I haven't updated mine in a while but I thought it was very random. Anyways I will add jsperf to my toolkit. Cheers :-) – Colostomy

Oddly, the above does not work for me, but @GrahamHotchkiss answer does. – Pinfish

@Schollii Probably because you are selecting an array of elements (even if only one is found), and [0] selects the first element in that array. – Relevant

Btw, the .live() doesn't work on the latest version of jQuery. You can use .on() instead. – Mccloud

So many upvotes for an answer that neither works nor answers the question... See Alex' answer below instead! – Nosology

Answer 2

Sorry, but the event handler is really not needed. What you do need is another element within the tag to click on.

<a id="test1" href="javascript:alert('test1')">TEST1</a>
<a id="test2" href="javascript:alert('test2')"><span>TEST2</span></a>

Jquery:

$('#test1').trigger('click'); // Nothing
$('#test2').find('span').trigger('click'); // Works
$('#test2 span').trigger('click'); // Also Works

This is all about what you are clicking and it is not the tag but the thing within it. Unfortunately, bare text does not seem to be recognised by JQuery, but it is by vanilla javascript:

document.getElementById('test1').click(); // Works!

Or by accessing the jQuery object as an array

$('#test1')[0].click(); // Works too!!!

Southsoutheast

$('selector')[0].click() will actually handle at least one case that triggering the event handler will not: having the browser recognize it as an actual click for triggering a protocol handler link. Calling trigger on the click event will not cause the associated application to launch. Thanks for including it in your answer! – Beatrizbeattie

Yep, .click() is precisely what I needed! – Carnet

$('#test2 span').trigger('click'); helped as it can open a url in new tab but $('#test1')[0].click(); was opening a pop up instea. – Junkie

When I try to handle click on background element: $('#titleee a').trigger('click'); -> Doesn't work! $('#titleee a')[0].click(); -> Works! – Monmouthshire

$('#test1')[0].click(); is a saviour. Thanks a lot – Aphyllous

document.getElementById('test1').click(); -- is the right answer – Olympic

note that .click() method works only if data-trigger="click" is set not "focus" – Godrich

Answer 3

Since this question is ranked #1 in Google for "triggering a click on an <a> element" and no answer actually mentions how you do that, this is how you do it:

$('#titleee a')[0].click();

Explanation: you trigger a click on the underlying html-element, not the jQuery-object.

You're welcome googlers :)

Acree

"you trigger a click on the underlying html-element, not the jQuery-object." -- this clicked for me, thank you! – Duplicity

[0] does the trick, great job! – Hairsplitting

Answer 4

If you are trying to trigger an event on the anchor, then the code you have will work.

$(document).ready(function() {
  $('a#titleee').trigger('click');
});

OR

$(document).ready(function() {
  $('#titleee li a[href="#inline"]').click();
});

OR

$(document).ready(function() {
  $('ul#titleee li a[href="#inline"]').click();
});

Skiagraph

Answer 5

With the code you provided, you cannot expect anything to happen. I second @mashappslabs : first add an event handler :

$("selector").click(function() {
    console.log("element was clicked"); // or alert("click");
});

then trigger your event :

$("selector").click(); //or
$("selector").trigger("click");

and you should see the message in your console.

Spherical

This does not work for me: if selector is "a" (HTML tag for links, just to be clear), the anonymous function gets called when I call trigger, but the tag's action does not happen. It's like the event does not propagate to the associated DOM element. The answer by @GrahamHotchkiss is the only one that works reliably for me. – Pinfish

Answer 6

Well you have to setup the click event first then you can trigger it and see what happens:

//good habits first let's cache our selector
var $myLink = $('#titleee').find('a');
$myLink.click(function (evt) {
  evt.preventDefault();
  alert($(this).attr('href'));
});

// now the manual trigger
$myLink.trigger('click');

Colostomy

Answer 7

This is the demo how to trigger event

<!DOCTYPE html>
    <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
        $("input").select(function(){
            $("input").after(" Text marked!");
        });
        $("button").click(function(){
            $("input").trigger("select");
        });
    });
    </script>
    </head>
    <body>

    <input type="text" value="Hello World"><br><br>

    <button>Trigger the select event for the input field</button>

    </body>
    </html>

Shiah

Answer 8

This doesn't exactly answer your question, but will get you the same result with less headache.

I always have my click events call methods that contain all the logic I would like to execute. So that I can just call the method directly if I want to perform the action without an actual click.

Jackhammer

Answer 9

You should call the element's native .click() method or use the createEvent API.

For more info, please visit: https://learn.jquery.com/events/triggering-event-handlers/

Cocker

Welcome to Stack Overflow! While this might be a valuable hint to solve the problem, a good answer also demonstrates the solution. Please edit to provide example code to show what you mean. Alternatively, consider writing this as a comment instead. – Merrill

Answer 10

For links this should work:

eval($(selector).attr('href'));

Rai

Answer 11

We can do it in many ways...

CASE - 1

We can use trigger like this : $("#myID").trigger("click");

CASE - 2

We can use click() function like this : $("#myID").click();

CASE - 3

If we want to write function on programmatically click then..

$("#myID").click(function() {
  console.log("Clicked");
// Do here whatever you want
});

CASE - 4

// Triggering a native browser event using the simulate plugin
$("#myID").simulate( "click" );  

Also you can refer this : https://learn.jquery.com/events/triggering-event-handlers/

Bdellium

Answer 12

Shortest answer:

$('#titlee a').click();

Bouncing