Trigger child link when parent is clicked

Trigger child link when parent is clicked

I want the <a/> in an <li/> to be triggered when the click happens anywhere within the </li>. So given the html...

  1. <ul>
  2. <li><a href="javascript:alert('clicked!')">test</a> <span>some other stuff</span></li>
  3. <li><a href="javascript:alert('clicked!')">test</a> <span>some other stuff</span></li>
  4. <li><a href="javascript:alert('clicked!')">test</a> <span>some other stuff</span></li>
  5. </ul>

...why doesn't this work?

  1. $(function () {
  2. $('ul').delegate('li','click', function () {
  3. $(this).find('a').first().trigger('click');
  4. });
  5. });

Instead I get an error...

RangeError: Maximum call stack size exceeded.