实现前端分页后iCheck复选框无法点击的问题解决求助

问题根因 #

你当前实现里是将tr节点的outerHTML（纯HTML字符串）存入数组，再重新插入表格时，iCheck初始化阶段给复选框生成的自定义样式结构、绑定的交互事件都会完全丢失。你之前重新初始化iCheck未生效，大概率是没有放在DOM插入操作完成之后执行。

修复方案 #

方案一：缓存DOM节点（更优，无需重复初始化iCheck） #

直接缓存tr的DOM对象而非HTML字符串，原有iCheck的绑定关系会被保留，不需要重复初始化：

$(document).ready(function(){
    $(".i-checks").iCheck({
        checkboxClass: "icheckbox_square-green",
        radioClass: "iradio_square-green",
    });

    // 分页逻辑
    var current_page = 1;
    var records_per_page = 10;
    var data = [];
    
    // 改动点：直接缓存tr DOM对象，不要转成HTML字符串
    $(".mail-box table tbody tr").each(function () {
        data.push($(this));
    });
    var records = data.length;
    
    function prevPage() {
        if (current_page > 1) {
            current_page--;
            changePage(current_page);
        }
    }
    function nextPage() {
        if (current_page < numPages()) {
            current_page++;
            changePage(current_page);
        }
    }
    function numPages() {
        return Math.ceil(records / records_per_page);
    }
    
    function changePage(page) {
        var table = $(".table-mail tbody");
        
        if (page < 1) page = 1;
        if (page > numPages()) page = numPages();
        
        table.empty();
        
        for (
            var i = (page - 1) * records_per_page;
            i < page * records_per_page && i < data.length;
            i++
        ) {
            // 改动点：直接append缓存的DOM对象
            table.append(data[i]);
        }
    }
    
    $(".btn-next").click(function () {
        nextPage();
    });
    
    $(".btn-prev").click(function () {
        prevPage();
    });
    
    changePage(1);
});

方案二：仍用HTML字符串缓存，插入后重新初始化iCheck #

如果你需要保留存HTML字符串的逻辑，只需要在每次插入DOM后重新执行iCheck初始化即可：

function changePage(page) {
    var table = $(".table-mail tbody");
    
    if (page < 1) page = 1;
    if (page > numPages()) page = numPages();
    
    table.html("");
    
    for (
        var i = (page - 1) * records_per_page;
        i < page * records_per_page && i < data.length;
        i++
    ) {
        table.append(data[i]);
    }
    // 新增：DOM插入完成后重新初始化iCheck
    $(".i-checks").iCheck({
        checkboxClass: "icheckbox_square-green",
        radioClass: "iradio_square-green",
    });
}

内容的提问来源于stack exchange，提问作者Kenneth