Question

I have the following HTML:

<table class="products">
  <tr>
    <td>Product description probably goes here</td>
    <td><a href="#">more information</a></td>
  </tr>
</table>

To make it a bit sexier for Javascript-enabled browsers I’ve added this jQuery (1.3.2):

$(document).ready(function(){
  $('table.products tr').click(function(){
    $(this).find('a').click();
    return false;
  });
});

But I think it gets into an infinite loop or something. Safari shows this:

RangeError: Maximum call stack size
exceeded. jquery.min.js:12

Can anyone please offer a workaround or better way?

Answer 1

The problem here is that a lies within the tr. Ergo, when the a click() method is triggered, the event bubbles to the tr containing it, creating the recursive loop you mentioned. Rather than call .find('a').click(), have both a and tr use the same click method.

$('tr, a').click(function(){
   //dostuff
   return false;
});