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通过在{DOM}之间来回移动<tr>来更改可见行。 {1}仅针对第一页上的列进行处理，因为这些列是初始化后唯一可见（可访问）的列。

因此，您必须在页面更改而不是初始化时分配单击处理程序（或任何您要附加的内容）。这里使用$('.questionID').on事件：

fnDrawCallback

参见演示 - ＆gt; http://jsfiddle.net/U9Jmg/

请注意function clickHandler() { alert('Click called'); } var dataTable = $('#example').dataTable({ fnDrawCallback : function() { $('.questionID') .off("click", clickHandler) .on("click", clickHandler) } });的使用。 dataTables实际上将.off来回移动DOM和内存中的表，包括任何附加事件。如果之前附加的事件未发布，我们将最终为每列添加多个警报。

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

正如您可以看到下面的注释，您还可以使用委托事件而不是直接事件绑定。它改变了设置，也许它不适合你的需要，但无论如何：

.questionID

参见演示 - ＆gt;的 http://jsfiddle.net/L29Dq/

Answer 2

使用DataTables分页功能时（与您一样），当您附加Click事件处理程序时，只有dom中存在数据的第一页。这就是处理程序附加到第一页上的元素并且仅附加到这些元素的原因。

当转到另一个页面时，DataTables将重绘表格，这实际上会删除附加的事件处理程序。您必须在每个表绘制后重新附加事件处理程序。 drawCallback选项应该是正确的选择：

$('#' + dataTableID).dataTable({
    "drawCallback": function(settings){
        $('.questionID').on("click", function(){
            alert('Click called');
        });
    }
});

正如@davidkonrad在他的回答中指出的那样，应该删除点击处理程序（使用off）以避免多次处理事件。

DataTables页面上也有一节：Advanced Initialisation - DOM/jQuery events。那里的例子使用委托事件。

.dataTable（）分页打破了类.click响应

2 个答案: