在我的代码中，动态按钮的 OnClick（） 事件在 JavaScript 中不起作用

Question

我使用JavaScript在网页上循环中添加了一个动态按钮，并为每个按钮分配了一个唯一的ID。我想将 onclick（） 事件监听器分配给每个按钮，但此函数未分配给任何动态按钮。请帮助我解决这个问题。谢谢。

myfunction()正在工作，但有一些问题。我无法在其动态 HTML 中看到点击事件。myfunction1()

有JS文件。data.js包含对象数组，其他包含访问数据的函数。

// function.js

function chargerArticles() {

  var myShoppingCart = [];

  var articles = document.getElementById("content");

  for (var i = 0; i < catalogArray.length; i++) {

    //Product div

    var article = document.createElement("div");

    article.setAttribute("class", "aa");

    //Unique id

    article.id = i + "-article";

      //Product Name

    var articleName = document.createElement("h4");

    articleName.setAttribute("class", "aa-product-title");

    var articleNameLink=  document.createElement('a');

    articleNameLink.setAttribute('href',"#");

    articleNameLink.innerText = catalogArray[i].name;

    articleName.appendChild(articleNameLink);

    article.appendChild(articleName);

    //Command Input Area

    var zoneCmd = document.createElement("div");

    var inputCmd = document.createElement("input");

    //Button of add to cart

    var button = document.createElement("BUTTON");

    button.setAttribute("class", "Btn hvr-underline-btn");

    button.innerHTML = " ADD";

    //Button unique id

    button.id = i + "-cmd";

    //not working

    button.addEventListener("click", myFunction1);

    function myFunction1() {

      var item = this.getAttribute("id");

      var pos = item.substring(0, 1);

      document.getElementById("1235").innerHTML = "Hello World";

      addToCart(pos);

    }

    //working

    document.getElementById("1234").addEventListener("click", myFunction);

    function myFunction() {

      document.getElementById("1234").innerHTML = "YOU CLICKED ME!";

    }

    zoneCmd.appendChild(button); //child 2

    //zoneCmd child of article element

    article.appendChild(zoneCmd);

    //finally article as a child of articles 

    articles.appendChild(article);

  }

}

Answer 1

出现此问题的原因是您动态定义。换句话说，在页面的初始呈现过程中未定义此元素。myfunction1您可以使用事件委派来修复它。操作方法如下：不要在 元素上定义回调，而是为具有匹配 css 类的&nbsp;PARENT&nbsp;元素的所有子元素定义回调。例如：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(&nbsp;".btnContainer&nbsp;.btn"&nbsp;).on(&nbsp;"click",&nbsp;function(&nbsp;event&nbsp;)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;event.preventDefault(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log("clicked"); &nbsp;&nbsp;&nbsp;&nbsp;});哪里：&nbsp;<div&nbsp;class='btnContainer'> &nbsp;</div>现在，当您动态添加带有（类名）的按钮作为 的子级时，它们仍将访问单击处理程序，因为事件处理程序不绑定到 元素 ，而是绑定到它的父级，因此当触发 click 事件时，父级将事件委托给具有匹配类的所有子级！btnbtnContainerbtn

Answer 2

不要在循环中添加函数委托看看这里。有很多问题，我已经解决了其中的几个问题你可能想做button.setAttribute("data-code",item.code);而不是button.id&nbsp;=&nbsp;i&nbsp;+&nbsp;"-cmd";// function.jsconst content = document.getElementById("content");content.addEventListener("click",function(e) {&nbsp; const tgt = e.target,&nbsp; // the element clicked&nbsp; &nbsp; id = tgt.id; // the ID of the element&nbsp; if (id.indexOf("-cmd") !=-1) { // is that element one of our buttons?&nbsp; &nbsp;// get the name of the article from the button - this could also be a data attibute&nbsp; &nbsp; var pos = id.split("-")[1];&nbsp;&nbsp; &nbsp; addToCart(pos);&nbsp; }&nbsp;&nbsp;})function chargerArticles() {&nbsp; const myShoppingCart = catalogArray.map(function(item, i) {&nbsp; &nbsp; //Product div&nbsp; &nbsp; var article = document.createElement("div");&nbsp; &nbsp; article.setAttribute("class", "aa");&nbsp; &nbsp; //Unique id&nbsp; &nbsp; article.id = i + "-article";&nbsp; &nbsp; // here would be a good place to add item.name or something&nbsp; &nbsp; //Command Input Area&nbsp; &nbsp; var zoneCmd = document.createElement("div");&nbsp; &nbsp; var inputCmd = document.createElement("input");&nbsp; &nbsp; //Button of add to cart&nbsp; &nbsp; var button = document.createElement("BUTTON");&nbsp; &nbsp; button.setAttribute("class", "Btn hvr-underline-btn");&nbsp; &nbsp; button.innerHTML = " ADD";&nbsp; &nbsp; //Button unique id&nbsp; &nbsp; button.id = i + "-cmd";&nbsp; &nbsp; zoneCmd.appendChild(button); //child 2&nbsp; &nbsp; //zoneCmd child of article element&nbsp; &nbsp; article.appendChild(zoneCmd);&nbsp; &nbsp; //finally article as a child of articles&nbsp;&nbsp; &nbsp; articles.appendChild(article);&nbsp; &nbsp; content.appendChild(articles) // ???&nbsp; })}function searchInCart(name) {&nbsp; return myCartArray.filter(function(x) {&nbsp; &nbsp; return x.name === name&nbsp; })[0];}