title: Trigger a click event on an inner element
body: <p>A row in a table where each first cell contains a link needs to be clicked and open a url. </p>
  
  <pre><code>&lt;table&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;a class="fancybox" href="detail.aspx?CID=67525"&gt;LT5C260A436C41&lt;/a&gt;&lt;/td&gt; 
      &lt;td&gt;more data&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;a class="fancybox" href="detail.aspx?CID=17522"&gt;LA5C260D436C41&lt;/a&gt;&lt;/td&gt; 
      &lt;td&gt;more data&lt;/td&gt;
    &lt;/tr&gt;
    ...
  &lt;/table&gt;
  </code></pre>
  
  <p>The complete row should be clickable instead of only the link top open the detail page in a <a href="http://fancybox.net/">fancybox</a>, ie in the page itself.</p>
  
  <p>So I <em>tried</em> to do something like this:</p>
  
  <pre><code>$("table tr").bind('click',function(e) {
      e.stopPropagation();
      $(this).find("a").trigger('click');
  });
  </code></pre>
  
  <p>But it seems that the event is bubbling recursivly resulting in a:</p>
  
  <blockquote>
    <p>Uncaught RangeError: <strong>Maximum call stack size exceeded</strong></p>
  </blockquote>
  
  <p><strong>How can I trigger the click on the full row instead of only the link in a proper way avoiding the stackoverflow?</strong></p>
  
  <p>UPDATE: I really appreciate the answers below, but <strong>my question is about triggering the event, NOT executing the behaviour inside that event.</strong> Workarounds could be nice, but not in this case.</p>