jQuery datatables loaded from JSON, row click event only firing on sort

In part of my Rails 3.2 app I am loading a datatable from server side JSON similar to Railscast #340.

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.

My code is pretty simple.

the view

<div id="leads-wrapper">
    <h1>Listing all leads</h1>
   <table id="leads_table" class="table" data-source="<%= leads_url(format: "json") %>">
     <thead>
      <tr>
        <th>Lead ID</th>
        <th>First name</th>
        <th>Last name</th>
        <th>Company</th>
        <th>Rating</th>
        <th>Email</th>
        <th>Phone</th>
        <th>Job Title</th>
        <th>Date Added</th>
     </tr>
     </thead>
    </table>
</div>

jQuery

$(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...

            }
        });
    });

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.

In case anyone is interested, the generated code is what you'd expect:

<table id="leads_table" class="table dataTable" data-source="http://localhost:3000/leads.json" aria-describedby="leads_table_info">
     <thead>
      <tr role="row"><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">Lead ID</th><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">First name</th><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">Last name</th><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">Company</th><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">Rating</th><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">Email</th><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">Phone</th><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">Job Title</th><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">Date Added</th></tr>
     </thead>
    <tbody role="alert" aria-live="polite" aria-relevant="all">
    <tr class="odd">
        <td class="id">256</td>
        <td class="">Mark</td>
        <td class="">Example</td>
        <td class=" sorting_1"></td>
        <td class=""><div class="star" data-score="5" data-lead-id="256" style="cursor: pointer; width: 100px;"><img src="/assets/star-on.png" alt="1" title="bad">&nbsp;<img src="/assets/star-on.png" alt="2" title="poor">&nbsp;<img src="/assets/star-on.png" alt="3" title="regular">&nbsp;<img src="/assets/star-on.png" alt="4" title="good">&nbsp;<img src="/assets/star-on.png" alt="5" title="gorgeous"><input type="hidden" name="score" value="5"></div></td>
        <td class="">[email protected]</td>
        <td class="">3145551212</td>
        <td class=""></td>
        <td class="">March 21, 2013</td>
    </tr>...
    </tbody>
    </table>