Datatables .dataTable（）分页会中断类。单击

当我构造一个普通表并给每列一个不同的类时，这些类对所有行都有响应。然而，当我在表上调用.dataTable（）时，只有分页结果的第1页是响应的。第2页及以后的内容没有响应

示例代码：

var-dataTableID='questionsTable'；
变量列={
问题ID：“ID”，
分类：“猫”，
困难级别：“困难”，
问：“数量”，
问题文本：“问题文本”
};
//我自己的构建HTML表的小函数。类是列名
//--问题ID、分类等
var tableHTML=makeTable（问题、列）；
$（'#'+dataTableID）.html（tableHTML）；
//dataTable工作得很好，除了第1页。单击是有响应的！
$（'#'+dataTableID）.dataTable（）；
//如果删除上面的.dataTable（），效果很好。仅适用于结果的第一页
//如果我保留.dataTable（）
$（'.questionID'）。在（“单击”，函数（）上）{
警报（“点击呼叫”）；
});

当使用

数据表

分页功能时（就像您所做的那样），当您附加click事件处理程序时，dom中只显示数据的第一页。这就是为什么处理程序附加到第一页上的元素，并且只附加到那些元素

转到另一页时，DataTables将重新绘制该表，这实际上会删除附加的事件处理程序。每次绘制表后，必须重新附加事件处理程序。该选项应该是正确的位置：

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

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

---

---

DataTables页面也有关于此的部分：。那里的示例使用委托事件

使用分页时，数据表通过在DOM中来回移动

来更改可见行<代码>$（'.questionID'）。on仅对第一页上的列进行处理，因为这些列是初始化后唯一可见（可访问）的列

因此，您必须在页面更改时而不是在初始化时指定单击处理程序（或任何您想要附加的内容）。这里通过使用

fnDrawCallback

事件：

函数clickHandler（）{
警报（“点击呼叫”）；
}
var dataTable=$（“#示例”）.dataTable({
fnDrawCallback:函数（）{
$（“.questionID”）
.off（“单击”，单击处理程序）
.on（“单击”，clickHandler）
}        
});

请参见演示->

注意使用

.off

。dataTables实际上在内存中来回移动

的DOM和表，包括任何附加的事件。如果之前附加的事件未发布，我们将为每个列生成多个警报

另外请注意，我只对演示中的所有列使用了一个class

.questionID

。示例是1.10.x，但在1.9.x中也适用

---

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

$（'example tbody'）。on（'click'，'questionID'，clickHandler）；

---

请参阅演示->

关于不要多次附加处理程序的好建议。根据这一点，当附加到表行时，不必在重画时重新附加处理程序。知道为什么会这样吗？@TPete，这就是直接事件和委托事件之间的区别。看见在您所参考的datatables.net示例中，使用了一个委派事件，即当单击任何内部元素

时触发的

上只有一个事件。在我的回答中，我使用了直接绑定，这是包含类

.questionID

的每个可见列的事件。你两者都可以。在您的答案中，您使用的是直接绑定而没有清理，导致了多个事件，请参见示例->非常清晰和彻底的答案。我同意TPete——这是一个非常好的建议。避免处理程序的多个连接。来回

[通过、穿过、越过、绕过、在下、在上、在中]

DOM？嘿@Jongosi，我不确定我是否理解你的观点-但是如果是我糟糕的英语，非常欢迎你纠正我的语言错误！！！