jQuery点击分页按钮用$(this).data('id')取data-id返回undefined

问题原因 #

你为click事件绑定的是箭头函数，箭头函数不会创建自己的this上下文，会继承外层作用域的this，此时this指向的不是你点击的.pageDOM元素，所以$(this).data("id")无法取到对应值，返回undefined。

解决方案 #

有两种常用的修复方式：

方式1：替换为普通函数作为回调 #

普通函数作为jQuery事件回调时，this会自动指向触发事件的DOM元素，直接修改回调的函数声明即可：

// 把原来的箭头函数改成普通函数
$(".page").click(function() {
    const pageId = $(this).data("id");
    currentPage = parseInt(pageId);
    console.log(currentPage);
    // 这里添加你要执行的对应逻辑，比如刷新列表数据、重新渲染分页
    renderPagination();
});

方式2：保留箭头函数，从事件对象取目标元素 #

如果你需要保留箭头函数的外层this指向，可以通过事件参数e获取触发点击的元素：

$(".page").click((e) => {
    const pageId = $(e.target).data("id");
    currentPage = parseInt(pageId);
    console.log(currentPage);
    // 执行对应逻辑
    renderPagination();
});

优化建议 #

你现在的写法每次调用renderPagination重新渲染页码时，都会重新绑定一次click事件，多次调用会出现事件重复绑定的问题，建议改为事件委托的写法，把事件绑定在不会被销毁的父容器上，不需要每次渲染都重新绑定：

$(document).ready(function () {
    let currentPage = 1;
    let totalPages = 100;

    // 事件委托写在renderPagination外面，只需要绑定一次
    $(".pagination-container").on("click", ".page", function() {
        currentPage = parseInt($(this).data("id"));
        // 执行你的业务逻辑
        renderPagination();
    });

    const renderPagination = () => {
        totalPages = 100;
        const paginationContainer = $(".pagination-container");
        paginationContainer.empty();

        let numShown = 5;
        numShown = Math.min(numShown, totalPages);
        let first = currentPage - Math.floor(numShown / 2);
        first = Math.max(first, 1);
        first = Math.min(first, totalPages - numShown + 1);
        const limitedPagination = [...Array(numShown)].map((k,i) => i + first);

        limitedPagination.forEach((page, i) => {
            paginationContainer.append(`<p class="page" data-id="${page}">${page}</p>`)
        });
        // 不需要在这里绑定点击事件了
    }
    
    renderPagination();
});

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