Jquery how to trigger click event on href element

Question

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>

Thanks for the answers.

Answer 1

I do not have factual evidence to prove this but I already ran into this issue. It seems that triggering a click() event on an <a> tag doesn't seem to behave the same way you would expect with say, a input button.

The workaround I employed was to set the location.href property on the window which causes the browser to load the request resource like so:

$(document).ready(function()
{
      var href = $('.cssbuttongo').attr('href');
      window.location.href = href; //causes the browser to refresh and load the requested url
   });
});

Edit:

I would make a js fiddle but the nature of the question intermixed with how jsfiddle uses an iframe to render code makes that a no go.

Answer 2

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

Answer 3

_{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.

Answer 4

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.

Answer 5

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.

Answer 6

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