与jquery数据表结合时，点击事件仅在第一页有效，其他页面无效

Question

这个问题有点难解释，希望你能明白我的意思。

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

这是我的代码：

HTML

<div id="dialog" title="Select one"></div>

PHP

foreach ($datafromDb as $data) {
    $datakey = '{"dataCode":"'.$data['dataCode'].'"}';
    echo "<td><a href='#' class='cssClass' data-key='" . $datakey . "'>Click</a></td>";
}

Javascript

$(document).ready(function () {
   // implement jquery dataTables
   $('#table').DataTable({
        bAutoWidth: false,
        stateSave: true
   });

   // this action executed when cssClass accessed
   $(".cssClass").click(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");
                }
            }
        });
    });
}

Answer 1

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

$('#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 中，因此不会附加事件侦听器。希望对您有所帮助。

Answer 2

似乎重新绘制数据表。这样您就必须再次使用该功能绑定点击事件。首先，将您的数据表分配给一个变量。像这样：

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

然后，绑定 draw 事件并将您的点击绑定代码移动到回调函数中。像这样：

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

参考：https://datatables.net/manual/events

Answer 3

这可能是最常见的 DataTables 错误/问题之一。事实上，它是第二个 DataTables “most common FAQ”。 引用 DataTables FAQ 中的 Allan：

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

A.将事件附加到由 DataTables 控制的表格中的单元格时，您需要小心它是如何完成的。因为 DataTables 从 DOM 中删除节点，所以使用静态事件侦听器应用的事件可能无法将自己绑定到表中的所有节点。要克服这个问题，只需使用 jQuery 委托事件侦听器选项，如 example 所示。

我建议看一下该示例页面，但总结一下它所说的内容：因为 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 类只是为了调用事件，而不是像本例中那样仅将事件附加到行本身？

Answer 4

例如需要指定父元素的id

$("#example").on("click", "a.cssClass", function () {})