title: Jquery getting the clicked row contents
body: <p>I'm using jquery 1.10.1.</p>
  
  <p>I have a table that is initially not present on the page. The table is rendered with an ajax call when the user selects something from a drop down box. This is query. The table is rendered at that point. The loop is working, the table is rendering.</p>
  
  <pre><code>var output = '&lt;table id="slots" class="table table-striped table-bordered table-condensed table-hover"&gt;';
  output += '&lt;thead&gt;';
  output += '&lt;tr&gt;';
  output += '&lt;th&gt;Select&lt;/th&gt;';
  output += '&lt;th&gt;Date&lt;/th&gt;';
  output += '&lt;th&gt;Time&lt;/th&gt;';
  output += '&lt;th&gt;Room&lt;/th&gt;';
  output += '&lt;/tr&gt;';
  output += '&lt;/thead&gt;';
  output += '&lt;tbody&gt;';
  $(result).find("RESULTS").each(function() {
  //loop through each row
  var room = $(this).find('room').text();
  var id = $(this).find('id').text();
  var date = $(this).find('aDate').text();
  var time = $(this).find('aTime').text();
  output += "&lt;tr&gt;&lt;td class=id&gt;" + id + "&lt;/td&gt;&lt;td&gt;" + date + "&lt;/td&gt;&lt;td&gt;" + time  + "&lt;/td&gt;&lt;td&gt;" + room + "&lt;/td&gt;&lt;/tr&gt;";
  }); // of each function
  </code></pre>
  
  <p>So far so good...</p>
  
  <p>Now the clicking piece. I'm doing baby steps...and this doesn't even work... it is inside the master $("document").ready(function(). I was wondering if that's part of the issue as #slots is not in the DOM when it's first rendered. I am not getting an alert here. It doesn't seem to find or have bound the "click" function. I found this snippet from another post.</p>
  
  <pre><code>$('#slots').find('tr').click( function(){
      alert('You clicked row '+ ($(this).index()+1) );
  });
  </code></pre>
  
  <p>Ultimately I want to grab the value of the id, date, time and room from the selected row and do something more with that. Any help would be appreciated. I'm new to this.</p>