jQuery Datatables - 使用控件会影响点击功能

Question

如果没有所有代码，就很难解决奇怪的间歇性问题，但这里（我快绝望了）：

我有一个使用数据表的 HTML 表格：

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

我有一个表格的 jQuery click 事件，它将被点击的行中第一个单元格的内容发送到表单，然后提交表单。函数如下：

//  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();
});

在我使用 Datatables 的任何导航功能（转到另一个页面、排序、更改显示的记录数）之前，单击功能都可以正常工作。但是在完成任何这些操作之后，我的点击事件只会偶尔起作用，似乎在随机行上。我查看了 HTML 源代码，但是单击事件起作用的行和不发生单击事件的行是相同的。下面是在 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>

第一行响应点击事件。第二个没有，只有在我排序、更改页面或更改显示记录数后才会出现此问题。我在我的点击事件中放置了一个警告框，但它不会触发，所以我知道点击第二行时甚至没有激活点击事件。

一如既往，感谢您提供任何有关主题的建议。

Answer 1

问题很可能是某些列包含在第一次加载中（当点击事件被绑定时），但在后续加载中，您不会重新加载整个页面，只是重新加载表格，因此事件不会反弹到新元素。

我想你会想在抽牌时取消绑定并重新绑定事件，即：

"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();
    });
}

Answer 2

尝试使用 javascript onclick 函数调用内联并传递元素，例如：

<tr onclick="updateRow(this)">

如果您需要 tr 的唯一选择器并控制输出，请为 id 或记录 id 使用索引，例如：

<tr id="[create in the output]">