datatables - .dataTable() 分页中断类 .click 响应

Question

当我构造一个普通表并为每一列指定一个不同的类时，这些类会响应所有行。但是，当我在我的表上调用 .dataTable() 时，只有第 1 页的分页结果是响应的。第 2 页及以后的页面没有响应。

示例代码:

var dataTableID = 'questionsTable';

var columns = {
    questionID: "ID",
    CategoryString: "Cat",
    difficultyLevel: "Diff",
    timesAsked: "Qty",
    questionText: "Question Text"
};

// my own little function that builds the HTML table. <TD> classes are column names   
//-- eg .questionID, .CategoryString, etc
var tableHTML = makeTable(questions, columns);

$('#' + dataTableID).html(tableHTML);

// dataTable works nicely except only page 1 .click is responsive!
$('#' + dataTableID).dataTable();

// works fine if I remove .dataTable() above. ONLY works for first page of results  
// if I keep .dataTable()
$('.questionID').on("click", function() {
    alert('Click called');
});

Answer 1

使用分页时，dataTables 通过移动 <tr> 来更改可见行来回 DOM。 $('.questionID').on 仅第一页上的列被处理，因为这些列是初始化后唯一可见(可访问)的列。

因此您必须在页面更改时而不是在初始化时分配点击处理程序(或您想要附加的任何内容)。这里通过使用 fnDrawCallback事件:

function clickHandler() {
   alert('Click called');
}

var dataTable = $('#example').dataTable({
    fnDrawCallback : function() {
       $('.questionID')
        .off("click", clickHandler)
        .on("click", clickHandler)        
    }        
});

查看演示 -> http://jsfiddle.net/U9Jmg/

注意 .off 的使用. dataTables 实际上移动了 <tr>来回 DOM 和内存中的表格，包括任何附加事件。如果以前的附加事件没有发布，我们将在每一列中出现多个警报。

另请注意，我只使用了一个类 .questionID对于演示中的所有列。该示例是 1.10.x，但这也适用于 1.9.x。

---

正如您在下面的评论中看到的，您还可以使用委托(delegate)事件而不是直接事件绑定(bind)。它改变了设置，也许它不适合您的需要，但无论如何:

$('#example tbody').on('click', '.questionID', clickHandler);

查看演示 -> http://jsfiddle.net/L29Dq/