jquery - Alert() 不会从数据表的第二页触发

Question

我有一个使用 Jquery 和数据表插件从后端返回的数据表。我需要在数据表中选择订单号并发出警报。警报和控制台在数据表的第一页中运行良好，但从第二页不再触发。我用谷歌搜索了它，但 .live() 已被弃用，并且建议的答案 .on() 似乎不起作用。

Jquery:

$(document).ready(function () {
$.ajax({
    type: "POST",
    //url: "OrderDetail.asmx/HelloWorld",
    url: "Order.aspx/GetOrder",
    data: "{'id':'273440'}",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (msg) {
        $('#order').append(msg.d);
        //alert(msg.d);
        console.log(msg);
        $('#orderTable').dataTable({
            // "sScrollY": "100px",

            "bAutoWidth": false,
            "bDeferRender": true
            //"bPaginate": false

        });
        // Click order number to get the details
        // Problem is here 
        $('.orderNumber').on('click', function () {
            var orderNum = $(this).text();
            console.log(orderNum);
        });

    },
    error: function (xhr, status, error) {
        // Display a generic error for now.
        alert("Ajax Error!");
    }
});

});

Answer 1

您设置的 onclick 事件仅适用于页面上的元素。这就是为什么它只适用于第一页。每当数据表显示新结果时，您都应该设置 onclick 事件。这可以通过将 onclick 监听器移至数据表的 fnDrawCallback 函数来完成。

$('#orderTable').dataTable({
    // "sScrollY": "100px",

    "autoWidth": false,
    "deferRender": true,
    //"bPaginate": false,

    "drawCallback": function() {
        $('.orderNumber').on('click', function () {
            var orderNum = $(this).text();
            console.log(orderNum);
        });
    }
});

参见https://datatables.net/reference/option/drawCallback