Question

Here’s the JS I’ve tried:

$('#footer').find('.browse li').click(function(e){
            $(this).find('a').click();
        });

Here’s the HTML in question:

<div id="footer" class="span-24"><div class="footer-box"><div class="footer-holder">
    <div class="browse">
        <ul>
           <li><a href="xyz">123</a></li>
           <li><a href="xyz">123</a></li>
           <li><a href="xyz">123</a></li>
           <li><a href="xyz">123</a></li>
        </ul>
    </div>
</div></div></div>

How can I make the <a> click if the <li> is clicked?

PS. This is due to a css design (the LI has a bunch of padding and a background that can’t be put on the A)

Answer 1

Your call to .click() just triggers anything bound to the a‘s click event. I think what you want is something like this:

$('#footer').find('.browse li').click(function(){
   window.location = $(this).find('a').attr('href');
}