How to trigger a click on a link using jQuery

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

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

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

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.

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

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

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>

For links this should work:

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

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

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.

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/

来源：https://stackoverflow.com/questions/5811122/how-to-trigger-a-click-on-a-link-using-jquery

标签

jquery

triggers

click