Question

Weird, intermittent problems are hard to solve without all the code, but here goes (I’m getting desperate):

I have an HTML table that uses Datatables:

$('#DatagridTable').dataTable({ 
    'sPaginationType': 'full_numbers',
}); 

I have a jQuery click event for the table that sends the contents of the first cell in the clicked row to a form and then submits the form. Here’s the function:

//  On row click, go to single-view page
$('.c_grid_tr').click(function() {  
    var equipID = $(this).find('td:first').text();
    //  Fill hidden text box on form with value to post
    $('#singleRowID').val(equipID);
    //  Post form
    $('#formEquipment').submit();
});

The click function works fine until I use any of the navigation features of Datatables (go to another page, sort, change the number of records displayed). But after doing any of these, my click event only works sporadically, seemingly on random rows. I’ve looked a the HTML source, but the rows where the click event works and those where it doesn’t are identical. Here’s an example of two rows that are rendered in Firefox:

<tr class='c_grid_tr'>
    <td style='display:none;'>817</td>
    <td class='c_grid_td'>Ground Optic #1</td>
    <td class='c_grid_td'>Zeiss</td>
    <td class='c_grid_td'>950</td>
    <td class='c_grid_td'>DTY</td>
    <td class='c_grid_td'>Storage Facility</td>
    <td class='c_grid_td'>Y</td>
</tr><tr class='c_grid_tr'>
    <td style='display:none;'>818</td>
    <tdclass='c_grid_td'>Ground Optic #1</td>
    <td class='c_grid_td'>Zeiss</td>
    <td class='c_grid_td'>950</td>
    <td class='c_grid_td'>DTZ</td>
    <td class='c_grid_td'>Storage Facility</td>
    <td class='c_grid_td'>Y</td>
</tr>

The first row responds to the click event. The second one does not, and this problem occurs ONLY after I have sorted, changed pages, or changed the number of displayed records. I put an alert box in my click event, and that doesn’t fire, so I know that the click event isn’t even activated when I click the second row.

As always, thanks for any on-topic advice.

Answer 1

The problem is most likely that certain columns were included in the first load (when the click event was bound), but on subsequent loads you’re not reloading the whole page, just the table, so the event isn’t rebound to the new elements.

You’re going to want to unbind and rebind the event on table draw, I think, i.e.:

"fnDrawCallback": function (oSettings) {
    $('.c_grid_tr').unbind();
    //  On row click, go to single-view page
    $('.c_grid_tr').click(function() {  
        var equipID = $(this).find('td:first').text();
        //  Fill hidden text box on form with value to post
        $('#singleRowID').val(equipID);
        //  Post form
        $('#formEquipment').submit();
    });
}