Javascript 当与jquery datatables结合使用时，Click事件仅在第一个页面起作用，而其他页面不起作用

很难解释这个问题，希望你能理解我的意思

我有1000多个由jquery datatables显示的数据，这个插件分页将自动创建。在每一行中，我都添加了一个css类，这样我就可以用于每一行数据。通过这个css类，我将javascript动作作为对话调用。问题是，在第一个页面中一切进展顺利，但在第二个到最后一个页面中，我无法访问javascript操作，对话框没有出现，我在console.log中进行了检查，没有显示任何问题

这是我的代码：

HTML

---

似乎重新绘制了数据表。因此，您必须使用函数再次绑定单击事件。首先，将数据表分配给变量。像这样：

var dt = $('#table').DataTable({
    bAutoWidth: false,
    stateSave: true
});

dt.on('draw', function() {
   $(".cssClass").click(function () {
       // The callback function.
   });
});

然后，绑定绘制事件，并将单击绑定代码移动到回调函数中。像这样：

var dt = $('#table').DataTable({
    bAutoWidth: false,
    stateSave: true
});

dt.on('draw', function() {
   $(".cssClass").click(function () {
       // The callback function.
   });
});

---

参考：

或者，您可以将事件侦听器添加到表本身：

$('#table').on("click", ".cssClass", function(){
    var self = this;
    $("#dialog").dialog({
        resizable: false,
        show: {
            effect: "bounce",
            duration: 500
        },
        hide: {
            effect: "explode",
            duration: 500
        },
        height: 100,
        modal: true,
        buttons: {
            "Button 1": function () {
                var data = $(self).data('key');
                window.open("http://www.example.com/" + "firstRoute" + "/" + data.dataCode, "_blank");
            },
            "Button 2": function () {
                var data = $(self).data('key');
                window.open("http://www.example.com/" + "secondRoute" + "/" + data.dataCode, "_blank");
            }
        }
    });
});

---

cssClass

类仅在第一页上对jQuery可用，后续单元格尚未在DOM中，因此不会附加事件侦听器。希望有帮助。

这可能是最常见的数据表错误/问题之一。事实上，这是第二个DataTables“”。 引用DataTables常见问题解答中的Allan：

问：我的活动在第二页不起作用

A.在将事件附加到由DataTables控制的表中的单元格时，需要注意如何执行。由于DataTables从DOM中删除节点，因此使用静态事件侦听器应用的事件可能无法将自身绑定到表中的所有节点。要克服这一问题，只需使用jQuery委托事件侦听器选项，如下所示

我建议看一下这个示例页面，但要总结一下它所说的：因为DataTables会根据需要从DOM中添加和删除行，所以事件可能会失败，特别是在第一个页面之后的页面上（因为加载DataTables按钮事件时，它们不在页面上）

解决方法是对行事件使用JQuery

on

事件侦听器。您可以使用DataTables

row（）.data（）

调用获取所选/单击行的数据。在您的情况下，它可能看起来像这样：

$('#table').on('click', 'tr', function () {
    var data = table.row( this ).data();

    $("#dialog").dialog({
        resizable: false,
        show: {
            effect: "bounce",
            duration: 500
        },
        hide: {
            effect: "explode",
            duration: 500
        },
        height: 100,
        modal: true,
        buttons: {
            "Button 1": function () {
                window.open("http://www.example.com/" + "firstRoute" + "/" + data('key').dataCode, "_blank");
            },
            "Button 2": function () {
                window.open("http://www.example.com/" + "secondRoute" + "/" + data('key').dataCode, "_blank");
            }
        }
    });
});

---

作为补充说明，您是否有理由向每一行添加CSS类来调用事件，而不是像本例中那样将事件附加到行本身？

谢谢您的帮助，我终于找到了一种方法。通过创建一个隐藏列，我可以用来存储id/代码，这样用户就看不到它了。我们可以根据您提供的信息访问此隐藏列。我在一个图标上附加了一个CSS类，当单击它时，它不会直接读取所有的行，而是通过CSS类进行过滤。访问CSS类时将读取该行。

$('#table').on('click', 'tr', function () {
    var data = table.row( this ).data();

    $("#dialog").dialog({
        resizable: false,
        show: {
            effect: "bounce",
            duration: 500
        },
        hide: {
            effect: "explode",
            duration: 500
        },
        height: 100,
        modal: true,
        buttons: {
            "Button 1": function () {
                window.open("http://www.example.com/" + "firstRoute" + "/" + data('key').dataCode, "_blank");
            },
            "Button 2": function () {
                window.open("http://www.example.com/" + "secondRoute" + "/" + data('key').dataCode, "_blank");
            }
        }
    });
});