How to trigger a click on a link using jQuery

Jquery Problem Overview

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

Jquery Solutions

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

Solution 2 - Jquery

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!!!

Solution 3 - Jquery

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

Solution 4 - Jquery

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.

Solution 5 - Jquery

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');
});

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

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

Solution 6 - Jquery

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>

Solution 7 - Jquery

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

Solution 8 - Jquery

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.

Solution 9 - Jquery

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/

Solution 10 - Jquery

For links this should work:

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

Solution 11 - Jquery

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/

Solution 12 - Jquery

Shortest answer:

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

Content Type	Original Author	Original Content on Stackoverflow
Question	Patrioticcow	View Question on Stackoverflow
Solution 1 - Jquery	Kit Sunde	View Answer on Stackoverflow
Solution 2 - Jquery	Graham Hotchkiss	View Answer on Stackoverflow
Solution 3 - Jquery	Alex from Jitbit	View Answer on Stackoverflow
Solution 4 - Jquery	Julz	View Answer on Stackoverflow
Solution 5 - Jquery	Anand Pal	View Answer on Stackoverflow
Solution 6 - Jquery	Harshad Hirapara	View Answer on Stackoverflow
Solution 7 - Jquery	Ady Ngom	View Answer on Stackoverflow
Solution 8 - Jquery	Matthew Vines	View Answer on Stackoverflow
Solution 9 - Jquery	George Filippakis	View Answer on Stackoverflow
Solution 10 - Jquery	Amin	View Answer on Stackoverflow
Solution 11 - Jquery	Rohit Tagadiya	View Answer on Stackoverflow
Solution 12 - Jquery	Sam	View Answer on Stackoverflow