jQuery div onclick to click an href inside the div

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;
});

Answer 2

First, I would console.log($(this).find('a')) and make sure it is the appropriate link. Next, I believe the click event is not what you want on the a element. I think you just want: var a = $(this).find('a'); if (a) document.location.href = a.attr('href');

My JavaScript is pretty weak though : )

Answer 3

$(document).ready(function(){
  $('table.products tr').click(function(e){
    e.stoPropagation(); // for stop the click action (event)
    $(this).find('a').click();
    return false;
  });
});