Tengo paginación y estoy tratando de cambiar la variable currentPage y ejecutar más código según la página en la que hizo clic el usuario; sin embargo, tengo algunos problemas para acceder al atributo de identificación de datos en la función .click que se ejecuta al hacer clic. Por lo que he visto, se supone que debo obtenerlo usando $(this).data("id") , sin embargo, esto me devuelve undefined .
$(document).ready(function () { let currentPage = 1; let totalPages = 100; 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>`) }); $(".page").click(() => { console.log($(this).data("id")); }); } renderPagination(); }); .pagination-container { display: flex; justify-content: center; align-items: center; } .page { display: flex; justify-content: center; align-items: center; width: 50px; height: 50px; padding: 10px; border: 1px solid #ddd; margin-right: 10px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .page:last-child { margin-right: 0px; } .page:hover { border: 1px solid #aaa; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="pagination-container"></div>