jQuery trigger('click') not going to href location

Question

I'm trying to make the entire area of each li in a ul click to the <a> inside each li. Wordpress 5.41 (if that makes any difference.)

<ul class="six-corners">
  <li id="button_parents">
     <h3><a href="/parents">Parents</a></h3>
  </li>
  <li id="button_schools">
     <h3><a href="/schools">Schools</a></h3>
 </li>

etc...

And this jQuery:

jQuery(".six-corners li").click(function(event) { 
   if (! jQuery(event.target).is('a')) {
      var a = jQuery(this).find("a");
      a.trigger('click');
    }
});

What happens is that the 'a' appear to be clicked (the link flashes as though clicked), but the page doesn't actually go to the new location.

What am I doing wrong?

It sounds like you prevent default, which is definitely not seemed in your code, but when testing this in a JSFiddle everything worked ok... Does jQuery loads well? Can you share a URL or test environment? — Shalev Levi, Jun 13 '20 at 22:00
@Shalev Levi: How do I figure out where the preventDefault is coming from? — jchwebdev, Jun 13 '20 at 22:03
why are you trying those custom code? when you click a, then you can be redirected to other page. I can't understand. please provide more details. — WebDev, Jun 13 '20 at 22:03
As I said, because the users want to be able to click -anywhere- inside the
Why don't you make the `` a block element to fill the whole `

HoldOffHunger · Accepted Answer · 2020-06-13T22:18:20.347

I found a similar answer on SO, How to trigger click event on href element , and I found this summary most useful...

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

For the most part, the problem is that $('a') will return an array of elements, and we want to click the first matching one, which we can solve by clicking on the [0]'th element. Here, updated your code and made a working, online demo...

jQuery(".six-corners li").click(function(event) { 
   if (! jQuery(event.target).is('a')) {
      var a = jQuery(this).find("a");
      $(a)[0].click();            // Here I added [0],
                                  // to indicate that I am clicking the first element
    }
});

You can see I'm not calling click() on the 'a'-selected elements, but on the 'a'[0]'th selected element. Now clicking on the link does work and opens the link as expected -- my browser properly 404's at the URL https://null.jsbin.com/parents, after I click <h3><a href="/parents">Parents</a></h3>.

jQuery trigger('click') not going to href location

1 Answers1