How to trigger click event on href element

JqueryEventsTriggersHyperlinkClick

Jquery Problem Overview


I'm trying to trigger click event on hyperlink with jQuery like the way below. Hyperlink does not have any id but it does have css class:

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

The function above is not working. This is the hyperlink:

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

Jquery Solutions


Solution 1 - Jquery

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

Solution 2 - Jquery

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.

Solution 3 - Jquery

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.

Solution 4 - Jquery

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.

Solution 5 - Jquery

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.

Solution 6 - Jquery

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

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionMonsterMMORPGView Question on Stackoverflow
Solution 1 - JqueryRoman StarkovView Answer on Stackoverflow
Solution 2 - JqueryMatthew CoxView Answer on Stackoverflow
Solution 3 - JqueryJosh CrozierView Answer on Stackoverflow
Solution 4 - JqueryBlazemongerView Answer on Stackoverflow
Solution 5 - JqueryAlan DongView Answer on Stackoverflow
Solution 6 - JqueryHenryView Answer on Stackoverflow