[jquery] How to trigger click event on href element

I am trying to trigger click event on hyperlink with jQuery like the way below. Hyperlink does not have any id but it does have cssclass

 $(document).ready(function () {  $('.cssbuttongo').trigger('click'); }); 

The function above is not working. This is the hyperlink

<a href="hyperlinkurl" class="cssbuttongo">hyperlink anchor</a>

Just want to let you guys know, the accepted answer doesn't always work.

Here's an example it will fail.

if <href='/list'>

href = $('css_selector').attr('href')
"/list"
href = document.querySelector('css_selector').href
"http://localhost/list"

or you could append the href you got from jQuery to this

href = document.URL +$('css_selector').attr('href');

or jQuery way

href = $('css_selector').prop('href')

Finally, invoke it to change the browser current page's url

window.location.href = href

or pop it out using window.open(url)

Here's an example in JSFiddle.

The native DOM method does the right thing:

$('.cssbuttongo')[0].click();
                  ^
              Important!

This works regardless of whether the href is a URL, a fragment (e.g. #blah) or even a javascript:.

Note that this calls the DOM click method instead of the jQuery click method (which is very incomplete and completely ignores href).

I was facing a similar issue how to click a button, instead of a link. It did not success in the methods .trigger('click') or [0].click(), and I did not know why. At last, the following was working for me:

$('#elementid').mousedown();

Triggering a click via JavaScript will not open a hyperlink. This is a security measure built into the browser.

See this question for some workarounds, though.

_{In addition to romkyns's great answer.. here is some relevant documentation/examples.}

DOM Elements have a native .click() method.

The HTMLElement.click() method simulates a mouse click on an element.

When click is used, it also fires the element's click event which will bubble up to elements higher up the document tree (or event chain) and fire their click events too. However, bubbling of a click event will not cause an <a> element to initiate navigation as if a real mouse-click had been received. (mdn reference)

Relevant W3 documentation.

A few examples..

• You can access a specific DOM element from a jQuery object: (example)

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

• You can use the .get() method to retrieve a DOM element from a jQuery object: (example)

    $('a').get(0).click();
  

• As expected, you can select the DOM element and call the .click() method. (example)

    document.querySelector('a').click();
  

It's worth pointing out that jQuery is not required to trigger a native .click() event.