Make TR clickable from an Anchor a inside the TR using jQuery
<p>I have a table that looks like this:</p>

<pre><code>&lt;table id=reportTbl&gt;
  &lt;tbody&gt;
    &lt;tr&gt;
      &lt;td&gt;
        &lt;table id=list&gt;
          &lt;tbody&gt;
            &lt;tr&gt;
              &lt;td&gt;
                &lt;a title="View Report" onclick="viewReport(123);"&gt;&lt;img src="../images/report/icon_pdf.gif" border="0"&gt;&lt;/a&gt;
              &lt;/td&gt;
              &lt;td&gt;Customer Orders&lt;/td&gt;
              &lt;td&gt;USA&lt;/td&gt;
              &lt;td&gt;Jul 20 2012 3:32PM&lt;/td&gt;
            &lt;/tr&gt;
            .....

          &lt;/tbody&gt;
        &lt;/table&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
&lt;/table&gt;
</code></pre>

<p>I want to make the entire table row in the <code>#list</code> table to be clickable. I thought adding </p>

<pre><code>$('#reportTbl #list a').each( function() {
  // I have other code in this section 
  // ....
  // end other section     

  $(this).closest('tr').click( function() { $(this).find('a[title="View Report"]').click(); });
});
</code></pre>

<p>but when I click on the row I just keeps opening windows for all of the links in the <code>#list</code> table. I've tried a bunch of different types of jQuery calls and they all do the same thing. </p>
