Trigger child element when parent is clicked

Question

I explain what I would like to achieve with an image, I think it is easier.

---

What I would like to do (click to see the example)

I've tried this but it doesn't work

$('.entry-tpl-grid').each(function(){
        $(this).on('click', function(){
            location.href = $(this).find('div > header > h3> a').attr('href');
        });
});

---

Where I want to apply it (click to see the example)

<article class="entry-tpl-grid">

    <figure class="entry-featured-media">
       <a href="#" class="g1-frame">
          <div class="g1-frame-inner">
                <img src="https://--.com/300x300.png">
          </div>
       </a>
    </figure>       


    <div class="entry-body">
        <header class="entry-header">
              <h3 class="entry-title">
                  <a href="https://www.--.com/" class="woocommerce-LoopProduct-link"> Product name </a> 
              </h3>
        </header>
    </div>

</article>

Thanks in advance.

Answer 1

You can use [0] to access the DOM Element directly, and then use the standard JS .click()

 $('.entry-tpl-grid').on('click', function() { $(this).find('div > header > h3 > a')[0].click(); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <article class="entry-tpl-grid"> <figure class="entry-featured-media"> <a href="#" class="g1-frame"> <div class="g1-frame-inner"> <img src="http://placekitten.com/150/150"> </div> </a> </figure> <div class="entry-body"> <header class="entry-header"> <h3 class="entry-title"> <a href="https://www.--.com/" class="woocommerce-LoopProduct-link"> Product name </a> </h3> </header> </div> </article>

Answer 2

using the each statment you would be adding multiple event handlers to each child element so would it not just be easier to add the event handler on the parent and if a child element is clicked it runs the parents event ...

 $('.entry-tpl-grid').on('click', function(){ location.href = $(this).find('div > header > h3> a').attr('href'); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <article class="entry-tpl-grid"> <figure class="entry-featured-media"> <a href="#" class="g1-frame"> <div class="g1-frame-inner"> <img src="https://--.com/300x300.png"> </div> </a> </figure> <div class="entry-body"> <header class="entry-header"> <h3 class="entry-title"> <a href="https://www.--.com/" class="woocommerce-LoopProduct-link"> Product name </a> </h3> </header> </div> </article>

Answer 3

This answer uses vanilla js:

 let articleClick = document.querySelectorAll('article.entry-tpl-grid'); // taking the article for (var i=0; i<articleClick.length; i++) { // iterate them articleClick[i].addEventListener('click', function() { // click event this.querySelector('h3.entry-title > a').click(); // click on the link inside (using this keyword }); }

 article {border: 1px solid black; width: 80%; margin: 20vh auto;} /* just for demo */

 <article class="entry-tpl-grid"> <figure class="entry-featured-media"> <a href="#" class="g1-frame"> <div class="g1-frame-inner"> <img src="https://--.com/300x300.png"> </div> </a> </figure> <div class="entry-body"> <header class="entry-header"> <h3 class="entry-title"> <a href="https://www.google.com/" class="woocommerce-LoopProduct-link"> Product name (Google) </a> </h3> </header> </div> </article> <article class="entry-tpl-grid"> <figure class="entry-featured-media"> <a href="#" class="g1-frame"> <div class="g1-frame-inner"> <img src="https://--.com/300x300.png"> </div> </a> </figure> <div class="entry-body"> <header class="entry-header"> <h3 class="entry-title"> <a href="https://www.microsoft.com/" class="woocommerce-LoopProduct-link"> Product name (Microsoft)</a> </h3> </header> </div> </article>