simulate click when parent div is clicked
<p>I'm trying to use jquery to trigger a click on an <code>&lt;a&gt;</code> tag when it's parent div is clicked</p>

<p>for this structure </p>

<pre><code>&lt;div id="menu_container"&gt;

                &lt;ul id="header_links_container"&gt;


                    &lt;li class="header_link header_link_large border_box_1"&gt;
                        &lt;a class="header_link" href="http://amazon.com"&gt;LINK 1&lt;/a&gt;
                    &lt;/li&gt;

                    &lt;li class="header_link border_box_1"&gt;
                        &lt;a class="header_link" href="http://google.com"&gt;LINK 2&lt;/a&gt;
                    &lt;/li&gt;


                    &lt;div class="tbc"&gt;&lt;/div&gt;

                &lt;/ul&gt;

            &lt;/div&gt;
</code></pre>

<p>using this</p>

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

<p>produces and infinite amount of clicks. I guess because when I trigger the click() on the <code>&lt;a&gt;</code> tag, it's parent div also receives a click and so it just does everything again. </p>

<p>How can I simulate a click on my anchor when it's parent div is clicked? Trying to use the answer from <a href="http://stackoverflow.com/a/9537518/1252748">this SO post</a> isn't working.</p>

<p><a href="http://jsbin.com/ucatir/1/edit" rel="nofollow">jsbin example</a></p>

<p>Thank you</p>
