Question

I’m trying to use jquery to trigger a click on an <a> tag when it’s parent div is clicked

for this structure

<div id="menu_container">

                <ul id="header_links_container">


                    <li class="header_link header_link_large border_box_1">
                        <a class="header_link" href="http://amazon.com">LINK 1</a>
                    </li>

                    <li class="header_link border_box_1">
                        <a class="header_link" href="http://google.com">LINK 2</a>
                    </li>


                    <div class="tbc"></div>

                </ul>

            </div>

using this

$('#menu_container').on('click', 'li.header_link', function(){
    console.log($(this));
    $(this).children('a.header_link').click();  
});

produces and infinite amount of clicks. I guess because when I trigger the click() on the <a> tag, it’s parent div also receives a click and so it just does everything again.

How can I simulate a click on my anchor when it’s parent div is clicked? Trying to use the answer from this SO post isn’t working.

jsbin example

Thank you

Answer 1

You can use Elements click method instead of jQuery’s.

$('#menu_container').on('click', 'li.header_link', function(){
   console.log('clicked');
   $(this).find("a.header_link").get(0).click();
});

Also you shoul try it on your computer as @Sushanth — suggests.