时间戳

首页 > 解决方案 > 如何将 onClick 函数添加到动态填充的 div？

javascript - 如何将 onClick 函数添加到动态填充的 div？

问题描述

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

<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);
    };
};
}

项目本身是正常创建的。流派onClick 功能不起作用。

我试图将此函数加载为正文中的 onload，但它不起作用

标签： javascriptapi

解决方案

你可以很容易地做到这一点，这里是一个粗略的例子。for所以只需在循环中添加事件侦听器

function generateLinks() {
  var container = document.getElementById("containter");
  var textNode;
  var node;
  
  [1,2,3,4,5].forEach(function(i) {
    node = document.createElement("li");
    node.setAttribute("id", i);
    textNode = document.createTextNode("Hello" + i);
    node.appendChild(textNode);
    
    node.addEventListener("click", function() {
        console.log("hello " + i)
    });
  
    container.appendChild(node);
  });


}

generateLinks();
<div id="containter">

</div>

推荐阅读