Estoy tratando de usar pokeApi para un sitio, pero mi función no funciona la segunda vez.
El resultado en siguiente = el siguiente enlace que quiero usar que devuelve la Api.
const beginLink = "https://pokeapi.co/api/v2/pokemon/"; let next; let previous; apiCall(beginLink); function apiCall(link) { $('#pokemons').html(``); $.ajax({ url: link }).done(handleResponse); function handleResponse(data) { next = data.next; previous = data.previous; for (let i = 0; i < 20; i++) { $('#pokemons').append(`<div class="pokemon"><img src="https://raw.githubusercontent.com/msikma/pokesprite/master/pokemon-gen8/regular/${data.results[i].name}.png"><br><p>${data.results[i].name}</p></div>`); } } } $("#next").on("click ", apiCall(next));El problema principal es que apiCall(next) no devuelve una función. Por lo tanto, cuando se produce el evento de clic, no sucede nada.
Para solucionar este problema, y también para eliminar la dependencia de las variables globales que deberían evitarse, puede colocar la URL de la siguiente llamada en los data que contiene el elemento #next . De esta forma, la función que actualiza el contenido del DOM en función de la respuesta de AJAX es completamente independiente.
let $next = $('#next'); let $pokemonContainer = $('#pokemons'); function apiCall() { $pokemonContainer.empty(); $.get($next.data('url')).done(handlePokemonApiResponse); } function handlePokemonApiResponse(data) { $next.data('url', data.next); let html = data.results.map(p => `<div class="pokemon"><img src="https://raw.githubusercontent.com/msikma/pokesprite/master/pokemon-gen8/regular/${p.name}.png"><br><p>${p.name}</p></div>`); $pokemonContainer.html(html); } $next.on("click", apiCall).trigger('click'); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script> <button type="button" id="next" data-url="https://pokeapi.co/api/v2/pokemon/">Next</button> <div id="pokemons"></div>