JavaScript Intetadjacenthtml（）不起作用

Question

全部 我试图使用insertadjacenthtml（）来创建元素并使用AddeventListener（）添加事件。我认为下面的代码中没有一个合乎逻辑的问题，但是它无法正常工作（不是console.log（））

我的代码如下：

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>

我觉得这大约是某物的延迟，并且应在某个地方添加settimeout（）。有建议吗？

Answer 1

只需在循环之外做：

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>

Answer 2

而不是所有列表项目上的听众使用事件委托。附加一个侦听器上ul元素，并在其“冒出” dom时从其子元素中听取事件。当ExpandDetails被称为检查事件是否来自列表项目中的锚点，然后记录结果。

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>

您可能会考虑的另一件事是创建HTML的数组，然后在将其添加到DOM之前加入。这样一来，您只会调用insertadjacenthtml 在所有html都已被编译而不是在循环的每一个迭代中。 （但是，请注意，此版本以与上一个示例相反的顺序打印列表项目，该示例可能是问题也可能不是问题的。 -us/doc/learn/javascript/asynchronous/promises＃async_and_await“ rel =” nofollow noreferrer“> async/等待 使代码变得更加整洁。）

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>