title: jquery trigger table row click event
body: <p>Sample Code:</p>
  
  <pre><code>&lt;table class="grid"&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;a href="#" id="unit_floor_plan_preview"&gt;click me &amp;nbsp;&lt;/a&gt;&lt;/td&gt;
          &lt;td class="unitNumber"&gt;&lt;span&gt;Unit 1&lt;/span&gt;&lt;/td&gt;
          &lt;td class="unitStatus"&gt;Open&lt;/td&gt;
      &lt;/tr&gt;&lt;tr&gt;
          &lt;td class="unitNumber"&gt;&lt;span&gt;Unit 2&lt;/span&gt;&lt;/td&gt;
          &lt;td class="unitStatus"&gt;Sold&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>I am able to get the row index of the row selected to get the exact column data.</p>
  
  <pre><code>tr = $('.grid').find('tr');
  
  tr.bind('click', function(event) {
  
      unitNo = $(this).find("td.unitNumber span").html(); 
      alert(unitNo);
  
  
  });
  </code></pre>
  
  <p>The above tr click event  is fine. </p>
  
  <p><strong>My problem</strong> now is how to trigger this tr binding event when clicking the anchor link <code>&lt;td&gt;&lt;a href="#" id="unit_floor_plan_preview"&gt;Show map &amp;nbsp;&lt;/a&gt;&lt;/td&gt;</code>within the table row?</p>
  
  <blockquote>
    <p><strong>Goal:</strong> 
    <em>To get first the <code>unitNo</code> (processed on tr.bind click event) before processing the rest of the code on anchored link?</em></p>
  </blockquote>
  
  <p>I tried to duplicate the tr click function within the anchor link click event but got <strong><em>undefined</strong> value</em> on unitNo. See my code:</p>
  
  <pre><code>$('a[id^="unit_floor_plan_preview"]').bind('click',function() {
      var tr = $('.grid').find('tr');
      unitNo = $(this).find("td.unitNumber span").html();  
  
      alert('From link: ' + unitNo);
  
  });
  </code></pre>
  
  <p><strong>test code:</strong>
  <a href="http://jsfiddle.net/VjkML/29/" rel="nofollow">http://jsfiddle.net/VjkML/29/</a></p>