DataTable分页场景下按钮仅第一页可触发功能的问题求助

嗨，我完全懂你的困扰！这种情况在使用DataTable做分页时特别常见，问题根源其实出在事件绑定的方式上～

你现在是直接给.fa-binoculars元素绑定点击事件，但DataTable切换分页时，会把当前页的DOM元素移除，再动态渲染新页面的内容。这些新生成的.fa-binoculars按钮并没有被绑定点击事件，自然只有第一页的按钮能正常工作。

解决方法很简单，用事件委托（利用事件冒泡特性）来绑定事件就好——把事件绑定到一个不会被DataTable销毁的父元素上（比如你的表格容器#descargar，比绑定到document更高效），然后指定触发事件的目标元素是.fa-binoculars。

修改你代码里的事件绑定部分：

原来的代码：

$('.fa-binoculars').on('click', function() {
    var codigoPartner = $(this).data('codigo-partner');
    var url_seguimiento = "/seguimiento/" + codigoPartner;
    window.location.href = url_seguimiento;
});

改成这样：

// 绑定到表格容器，监听子元素的点击事件
$("#descargar").on('click', '.fa-binoculars', function() {
    var codigoPartner = $(this).data('codigo-partner');
    var url_seguimiento = "/seguimiento/" + codigoPartner;
    window.location.href = url_seguimiento;
});

另外，你代码里的$("#descargar").ready(function() { ... })可以直接去掉，因为外面已经有$(function () { ... })（这是DOM加载完成的回调），把事件委托的代码直接放在里面就行。

调整后的完整脚本部分大概是这样：

$(function () {
    $("#descargar").DataTable({
        "lengthChange": true,
        "searching": true,
        "ordering": true,
        "info": true,
        "autoWidth": false,
        "responsive": true,
        language: {
            "lengthMenu": "Mostrar _MENU_ registros",
            "zeroRecords": "No se encontraron resultados",
            "info": "Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros",
            "infoEmpty": "Mostrando registros del 0 al 0 de un total de 0 registros",
            "infoFiltered": "(filtrado de un total de _MAX_ registros)",
            "sSearch": "Buscar:",
            "oPaginate": {
                "sFirst": "Primero",
                "sLast":"Último",
                "sNext":"Siguiente",
                "sPrevious": "Anterior"
            },
            "sProcessing":"Procesando...",
        },
    });

    // 用事件委托绑定点击事件
    $("#descargar").on('click', '.fa-binoculars', function() {
        var codigoPartner = $(this).data('codigo-partner');
        var url_seguimiento = "/seguimiento/" + codigoPartner;
        window.location.href = url_seguimiento;
    });
});

这样修改后，不管切换到哪一页，新渲染出来的.fa-binoculars按钮都能正常触发跳转功能啦！

备注：内容来源于stack exchange，提问作者RenzoC