title: jQuery datatables loaded from JSON, row click event only firing on sort
body: <p>In part of my Rails 3.2 app I am loading a datatable from server side JSON similar to <a href="http://railscasts.com/episodes/340-datatables?view=asciicast" rel="nofollow">Railscast #340</a>. </p>
  
  <p>I'm trying to call a row click event on the row to load a separate detailed view next to the table and the jQuery click event doesn't fire on tr click, but does fire when a column is sorted. I use similar code elsewhere on the app, but those tables are from smaller datasets and don't use a JSON API. </p>
  
  <p>My code is pretty simple.</p>
  
  <h2>the view</h2>
  
  <pre><code>&lt;div id="leads-wrapper"&gt;
      &lt;h1&gt;Listing all leads&lt;/h1&gt;
     &lt;table id="leads_table" class="table" data-source="&lt;%= leads_url(format: "json") %&gt;"&gt;
       &lt;thead&gt;
        &lt;tr&gt;
          &lt;th&gt;Lead ID&lt;/th&gt;
          &lt;th&gt;First name&lt;/th&gt;
          &lt;th&gt;Last name&lt;/th&gt;
          &lt;th&gt;Company&lt;/th&gt;
          &lt;th&gt;Rating&lt;/th&gt;
          &lt;th&gt;Email&lt;/th&gt;
          &lt;th&gt;Phone&lt;/th&gt;
          &lt;th&gt;Job Title&lt;/th&gt;
          &lt;th&gt;Date Added&lt;/th&gt;
       &lt;/tr&gt;
       &lt;/thead&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <h2>jQuery</h2>
  
  <pre><code>$(document).ready(function () {
      $('#leads_table').find("tr").on("click", function (e) {
          console.log('clicked');
          var link;
          link = $(this).children('.id').first();
          e.preventDefault();
          var url = '/lead_detail/' + $(link).data("id");
          $.ajax(url, {
              beforeSend: function () {
                  $('#wait').show();
                  $("#lead-information").hide();
              },
              dataType: 'script',
              type: 'GET',
              complete: function (response) {
                  $('#lead-information').empty().append(response["responseText"]);
                  $("#lead-information").show();
                  //other stuff...
  
              }
          });
      });
  </code></pre>
  
  <p>Everything loads correctly and this code has been working in production for over a year, but adding the new detail view to it is the change. I know I can exclude the sort event from my click jQuery above, but I'm more worried about why the click event doesn't fire for tbody rows right now. </p>
  
  <p>In case anyone is interested, the generated code is what you'd expect: </p>
  
  <pre><code>&lt;table id="leads_table" class="table dataTable" data-source="http://localhost:3000/leads.json" aria-describedby="leads_table_info"&gt;
       &lt;thead&gt;
        &lt;tr role="row"&gt;&lt;th class="sorting" role="columnheader" tabindex="0" aria-controls="leads_table" rowspan="1" colspan="1" style="width: 96px;" aria-label="Lead ID: activate to sort column ascending"&gt;Lead ID&lt;/th&gt;&lt;th class="sorting" role="columnheader" tabindex="0" aria-controls="leads_table" rowspan="1" colspan="1" style="width: 130px;" aria-label="First name: activate to sort column ascending"&gt;First name&lt;/th&gt;&lt;th class="sorting" role="columnheader" tabindex="0" aria-controls="leads_table" rowspan="1" colspan="1" style="width: 128px;" aria-label="Last name: activate to sort column ascending"&gt;Last name&lt;/th&gt;&lt;th class="sorting_asc" role="columnheader" tabindex="0" aria-controls="leads_table" rowspan="1" colspan="1" style="width: 118px;" aria-label="Company: activate to sort column ascending"&gt;Company&lt;/th&gt;&lt;th class="sorting" role="columnheader" tabindex="0" aria-controls="leads_table" rowspan="1" colspan="1" style="width: 85px;" aria-label="Rating: activate to sort column ascending"&gt;Rating&lt;/th&gt;&lt;th class="sorting" role="columnheader" tabindex="0" aria-controls="leads_table" rowspan="1" colspan="1" style="width: 75px;" aria-label="Email: activate to sort column ascending"&gt;Email&lt;/th&gt;&lt;th class="sorting" role="columnheader" tabindex="0" aria-controls="leads_table" rowspan="1" colspan="1" style="width: 81px;" aria-label="Phone: activate to sort column ascending"&gt;Phone&lt;/th&gt;&lt;th class="sorting" role="columnheader" tabindex="0" aria-controls="leads_table" rowspan="1" colspan="1" style="width: 112px;" aria-label="Job Title: activate to sort column ascending"&gt;Job Title&lt;/th&gt;&lt;th class="sorting" role="columnheader" tabindex="0" aria-controls="leads_table" rowspan="1" colspan="1" style="width: 147px;" aria-label="Date Added: activate to sort column ascending"&gt;Date Added&lt;/th&gt;&lt;/tr&gt;
       &lt;/thead&gt;
      &lt;tbody role="alert" aria-live="polite" aria-relevant="all"&gt;
      &lt;tr class="odd"&gt;
          &lt;td class="id"&gt;256&lt;/td&gt;
          &lt;td class=""&gt;Mark&lt;/td&gt;
          &lt;td class=""&gt;Example&lt;/td&gt;
          &lt;td class=" sorting_1"&gt;&lt;/td&gt;
          &lt;td class=""&gt;&lt;div class="star" data-score="5" data-lead-id="256" style="cursor: pointer; width: 100px;"&gt;&lt;img src="/assets/star-on.png" alt="1" title="bad"&gt;&amp;nbsp;&lt;img src="/assets/star-on.png" alt="2" title="poor"&gt;&amp;nbsp;&lt;img src="/assets/star-on.png" alt="3" title="regular"&gt;&amp;nbsp;&lt;img src="/assets/star-on.png" alt="4" title="good"&gt;&amp;nbsp;&lt;img src="/assets/star-on.png" alt="5" title="gorgeous"&gt;&lt;input type="hidden" name="score" value="5"&gt;&lt;/div&gt;&lt;/td&gt;
          &lt;td class=""&gt;mark.example@example.net&lt;/td&gt;
          &lt;td class=""&gt;3145551212&lt;/td&gt;
          &lt;td class=""&gt;&lt;/td&gt;
          &lt;td class=""&gt;March 21, 2013&lt;/td&gt;
      &lt;/tr&gt;...
      &lt;/tbody&gt;
      &lt;/table&gt;
  </code></pre>