title: jQuery - Click event on <tr> elements with in a table and getting <td> element values
body: <p>I have the following HTML in a <a href="http://en.wikipedia.org/wiki/JavaServer_Pages" rel="noreferrer">JSP</a> file:</p>
  
  <pre><code>&lt;div class="custList"&gt;
     &lt;table class="dataGrid"&gt;
        &lt;c:forEach var="cust" items="${custList}"&gt;
           &lt;tr&gt;
              &lt;td&gt;${cust.number}&lt;/td&gt;
              &lt;td&gt;${cust.description}&lt;/td&gt;
              &lt;td&gt;${cust.type}&lt;/td&gt;
              &lt;td&gt;${cust.status}&lt;/td&gt;
          &lt;/tr&gt;
       &lt;/c:forEach&gt;
    &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I need to be able to trigger a <code>'click'</code> event on each of the dynamically created <code>&lt;tr&gt;</code> tags and also be able to access the values of the <code>&lt;td&gt;</code> tags (of the clicked <code>&lt;tr&gt;</code>) from within the JavaScript function. I have this function already, but sadly it doesn't seem to be working.</p>
  
  <pre><code>$(document).ready(function() {
      $("div.custList &gt; table &gt; tr").live('click', function() {
          alert("You clicked my &lt;tr&gt;!");
          //get &lt;td&gt; element values here!!??
      });
  });
  </code></pre>
  
  <hr>
  
  <p><strong>Update (Jan 2016)</strong>: jQuery.live is deprecated (as noted here:<a href="http://api.jquery.com/live/" rel="noreferrer">http://api.jquery.com/live/</a>) </p>
  
  <blockquote>
    <p>As of jQuery 1.7, the .live() method is deprecated. Use .on() to
    attach event handlers.</p>
  </blockquote>