todo lo que estaba tratando de usar insertAdjacentHTML() para crear elementos y agregar eventos usando addEventListener() . No creo que haya un problema lógico en mi código a continuación, pero no estaba funcionando (no console.log()ing)
Mi código era el siguiente:
const END_POINT = "https://swapi.dev/api/people/" let ul = document.querySelector("ul") fetch(END_POINT) .then(response => response.json()) .then(data => { let people = data.results console.log(people) people.forEach((person, i) => { let html = ` <li><a href=${person.homeworld} target="_blank">${person.name}</a></li> ` ul.insertAdjacentHTML("afterbegin", html) function expandDetails(ev) { ev.preventDefault() console.log("fef") console.log("ev.target", ev.target) } let a = document.querySelectorAll("a")[i] a.addEventListener("click", expandDetails) }) }) <ul id="list"></ul> Tengo la sensación de que se trata de un retraso de algo y se debe agregar un setTimeout() en alguna parte. ¿Algún consejo?
Solo hazlo fuera de tu ciclo:
const END_POINT = "https://swapi.dev/api/people/" let ul = document.querySelector("ul") fetch(END_POINT) .then(response => response.json()) .then(data => { let people = data.results people.forEach((person, i) => { let html = ` <li><a href=${person.homeworld} target="_blank">${person.name}</a></li> ` ul.insertAdjacentHTML("afterbegin", html) }) document.querySelectorAll("a").forEach(a => a.addEventListener('click', expandDetails)) }) function expandDetails(ev) { ev.preventDefault() console.log("ev.target", ev.target) } <ul id="list"></ul>En lugar de oyentes en todos los elementos de la lista, use la delegación de eventos . Adjunte un oyente al elemento ul y haga que escuche los eventos de sus elementos secundarios a medida que "hacen burbujas" en el DOM. Cuando se llama expandDetails , verifique que el evento sea de un ancla en un elemento de lista y luego registre el resultado.
const END_POINT = "https://swapi.dev/api/people/" const ul = document.querySelector("ul") ul.addEventListener('click', expandDetails); function expandDetails(e) { if (e.target.matches('li a')) { e.preventDefault(); console.log(e.target.textContent); } } fetch(END_POINT) .then(response => response.json()) .then(data => { const people = data.results; people.forEach((person, i) => { const html = ` <li> <a href=${person.homeworld}>${person.name}</a> </li> ` ul.insertAdjacentHTML("afterbegin", html) }); }); <ul id="list"></ul> Otra cosa que podría considerar es crear una matriz de HTML y luego joining antes de agregarla al DOM. De esa manera, solo está llamando a insertAdjacentHTML una vez después de que se haya compilado todo el HTML en lugar de cada iteración del bucle. (Tenga en cuenta, sin embargo, que esta versión imprime los elementos de la lista en el orden opuesto al ejemplo anterior, lo que puede o no ser un problema. También he usado async/await para que el código sea un poco más ordenado).
const END_POINT = "https://swapi.dev/api/people/" const ul = document.querySelector("ul") ul.addEventListener('click', expandDetails); function expandDetails(e) { if (e.target.matches('li a')) { e.preventDefault(); console.log(e.target.textContent.trim()); } } async function main() { const response = await fetch(END_POINT); const { results } = await response.json(); const html = results.map(person => { return ` <li> <a href=${person.homeworld}> ${person.name} </a> </li> ` }); ul.insertAdjacentHTML('beforeend', html.join('')); } main(); <ul id="list"></ul>