Triggering click event on anchor tag doesn't works

Question

I just ran into this question

FIDDLE

Triggering click event on anchor tag is not working here.

<a class="button2" href="#popup1">hello</a>
<div id="popup1" class="overlay">
  <div class="popup">
    <div class="contentSpec">
      <h2>Would you like to visit</h2>
      <h1>someURL</h1>
    </div>
    <a class="close" href="#"></a>
    <div class="content">

      <div class="box">
        <a class="button" href="#popup1">YES</a>
        <a class="button1" href="#popup1">NO</a>
      </div>
    </div>
  </div>
</div>

JS:

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

My question, is why the trigger event is not working in this case?

Answer 1

You need to call native DOM click() method in order to fire default clicking anchor behaviour, jQuery specifically excludes it on anchor:

$(document).ready(function() {
  $(".button2")[0].click();
});

-jsFiddle-

Answer 2

Use

$(".button2").get(0).click();

The get(0) will return the first DOM object instead of the jquery object, and click() will be triggered.

Updated fiddle

Answer 3

As you don't have any .click() event bound on it, it never fires it.

You need to fire the DOM click event with .click() instead of .trigger(e) of jQuery method and this should only work on dom nodes. Which you can achieve by introducing the index [0] or with jQuery's method .get(0).

Instead try this:

$(document).ready(function() {
  $(".button2")[0].click();
  // or $(".button2").get(0).click();
});

and if this is the case then you can do this with javascript only:

window.addEventListener('DOMContentLoaded', function(e){
   document.querySelector('.button2').click();
}, false);