Javascript 如何向动态填充的div添加onClick函数？

我有带下拉菜单的引导导航栏：

<ul class="navbar-nav mr-auto">
  <li class="nav-item dropdown">
   <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria haspopup="true" aria-expanded="false">GANRES</a>
   <div class="dropdown-menu"></div>
  </li>
</ul>

我有一个函数，它用TMDb API填充它们的类型：

async function getGenres() {
    let url = "https://api.themoviedb.org/3/genre/movie/list?api_key=d80a54a0422d5fff6149c48741c8bece&language=en-US";
    let response = await fetch(url);
    let genres = await response.json();
    let navbar = document.getElementsByClassName("nav-item dropdown");
    navbar.innerHTML += `<div class="dropdown-menu">`;
    let nav = document.getElementsByClassName("dropdown-menu");
    for (let i = 0; i < genres.genres.length; i++) {
        nav[0].innerHTML += `<a class="dropdown-item" href="#">` + genres.genres[i].name + `</a>`;
    }

//This part should add separately to each element, but it does not work
//Here is error: Cannot set property 'click' of undefined at getGenres

    for (let i = 0; i < genres.genres.length; i++) {
    document.getElementsByClassName("dropdown-menu")[i].click = function () {
        getmovies("discover/movie?api_key=d80a54a0422d5fff6149c48741c8bece&language=en-us&sort_by=popularity.desc&include_adult=false&include_video=false&page=1&with_genres=" + genres.genres[i].id);
    };
};
} 

异步函数getGenres（）{ 让url=”https://api.themoviedb.org/3/genre/movie/list?api_key=d80a54a0422d5fff6149c48741c8bece&language=en-美国”； let response=等待获取（url）； 让genres=wait response.json（）； 让navbar=document.getElementsByClassName（“导航项下拉列表”）； navbar.innerHTML+=`； 让nav=document.getElementsByClassName（“下拉菜单”）； for（设i=0；i

---

项目本身是正常创建的，onClick函数就是不起作用

---

我试图将此函数作为onload加载到body中，但它不起作用

您可以轻松地完成它，下面是一个粗略的示例。因此，只需在

for

循环中添加事件侦听器即可

function generateLink（）{
var container=document.getElementById（“container”）；
var-textNode；
var节点；
[1,2,3,4,5].forEach（函数（i）{
节点=document.createElement（“li”）；
node.setAttribute（“id”，i）；
textNode=document.createTextNode（“Hello”+i）；
node.appendChild（textNode）；
node.addEventListener（“单击”，函数（）{
console.log（“hello”+i）
});
container.appendChild（节点）；
});
}
生成线（）
您可以很容易地做到这一点，下面是一个粗略的示例。因此，只需在
for
循环中添加事件侦听器即可


function generateLink（）{
var container=document.getElementById（“container”）；
var-textNode；
var节点；
[1,2,3,4,5].forEach（函数（i）{
节点=document.createElement（“li”）；
node.setAttribute（“id”，i）；
textNode=document.createTextNode（“Hello”+i）；
node.appendChild（textNode）；
node.addEventListener（“单击”，函数（）{
console.log（“hello”+i）
});
container.appendChild（节点）；
});
}
生成线（）
我删除了API调用，以关注导致问题的代码：

async function getGenres() {
  const genres = {
    genres: [{ name: "pop" }, { name: "punk" }]
  };

  const navbar = document.getElementsByClassName("nav-item dropdown");
  console.log("navbar", navbar);

  let nav = document.createElement("div");
  nav.className = "dropdown-menu";

  for (let i = 0; i < genres.genres.length; i++) {
    let a_tag = document.createElement("a");
    let link = document.createTextNode(genres.genres[i].name);
    a_tag.appendChild(link);
    a_tag.className = "dropdown-item";
    a_tag.href = "#";
    nav.appendChild(a_tag);
  }
  navbar[0].appendChild(nav);

  //This part should add separately to each element, but it does not work
  //Here is error: Cannot set property 'click' of undefined at getGenres

  const items = document.getElementsByClassName("dropdown-item");
  for (let i = 0; i < genres.genres.length; i++) {
    items[i].addEventListener("click", () => {
      alert("get movies here for name" + genres.genres[i].name);

    });
  }
}


异步函数getGenres（）{
常量类型={
类型：[{name:“pop”}，{name:“朋克”}]
};
const navbar=document.getElementsByClassName（“导航项下拉列表”）；
控制台日志（“导航栏”，导航栏）；
让nav=document.createElement（“div”）；
nav.className=“下拉菜单”；
for（设i=0；i{
提醒（“在此处获取电影名称”+genres.genres[i].name）；
});
}
}
我删除了API调用，以关注导致问题的代码：

async function getGenres() {
  const genres = {
    genres: [{ name: "pop" }, { name: "punk" }]
  };

  const navbar = document.getElementsByClassName("nav-item dropdown");
  console.log("navbar", navbar);

  let nav = document.createElement("div");
  nav.className = "dropdown-menu";

  for (let i = 0; i < genres.genres.length; i++) {
    let a_tag = document.createElement("a");
    let link = document.createTextNode(genres.genres[i].name);
    a_tag.appendChild(link);
    a_tag.className = "dropdown-item";
    a_tag.href = "#";
    nav.appendChild(a_tag);
  }
  navbar[0].appendChild(nav);

  //This part should add separately to each element, but it does not work
  //Here is error: Cannot set property 'click' of undefined at getGenres

  const items = document.getElementsByClassName("dropdown-item");
  for (let i = 0; i < genres.genres.length; i++) {
    items[i].addEventListener("click", () => {
      alert("get movies here for name" + genres.genres[i].name);

    });
  }
}


异步函数getGenres（）{
常量类型={
类型：[{name:“pop”}，{name:“朋克”}]
};
const navbar=document.getElementsByClassName（“导航项下拉列表”）；
控制台日志（“导航栏”，导航栏）；
让nav=document.createElement（“div”）；
nav.className=“下拉菜单”；
for（设i=0；i{
提醒（“在此处获取电影名称”+genres.genres[i].name）；
});
}
}

谢谢@KiaiFighter。以下是最终代码：

async function getGenres() {
        let url = "https://api.themoviedb.org/3/genre/movie/list?api_key=d80a54a0422d5fff6149c48741c8bece&language=en-US";
        let response = await fetch(url);
        let genres = await response.json();

        const navbar = document.getElementsByClassName("nav-item dropdown");

        let nav = document.createElement("div");
        nav.className = "dropdown-menu";

        for (let i = 0; i < genres.genres.length; i++) {
            let a_tag = document.createElement("a");
            let link = document.createTextNode(genres.genres[i].name);
            a_tag.appendChild(link);
            a_tag.className = "dropdown-item";
            a_tag.href = "#";
            nav.appendChild(a_tag);
        }
        navbar[0].appendChild(nav);
        console.log("nav", nav);

        const items = document.getElementsByClassName("dropdown-item");
        for (let i = 0; i < genres.genres.length; i++) {
            items[i].addEventListener("click", () => {
                getMovies("discover/movie?api_key=d80a54a0422d5fff6149c48741c8bece&language=en-us&sort_by=popularity.desc&include_adult=false&include_video=false&page=1&with_genres=" + genres.genres[i].id);
            });
        }

        console.log("navbar", navbar);
    }

异步函数getGenres（）{ 让url=”https://api.themoviedb.org/3/genre/movie/list?api_key=d80a54a0422d5fff6149c48741c8bece&language=en-美国”； let response=等待获取（url）； 让genres=wait response.json（）； const navbar=document.getElementsByClassName（“导航项下拉列表”）； 让nav=document.createElement（“div”）； nav.className=“下拉菜单”； for（设i=0；i{ getMovies（“发现/电影？api_key=d80a54a0422d5fff6149c48741c8bece&language=en-us&sort_-by=popularity.desc&include_成人=false&include