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

Question

我使用JavaScript在网页上循环中添加了一个动态按钮，并为每个按钮分配了一个唯一的ID。我想将 onclick（） 事件监听器分配给每个按钮，但此函数未分配给任何动态按钮。请帮助我解决这个问题。谢谢。myfunction()正在工作，但有一些问题。我无法在其动态 HTML 中看到点击事件。myfunction1()有JS文件。data.js包含对象数组，其他包含访问数据的函数。// function.jsfunction 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 类的 PARENT 元素的所有子元素定义回调。例如：

     $( ".btnContainer .btn" ).on( "click", function( event ) {
        event.preventDefault();
             console.log("clicked");

    });

哪里：

 <div class='btnContainer'>
 </div>

现在，当您动态添加带有（类名）的按钮作为 的子级时，它们仍将访问单击处理程序，因为事件处理程序不绑定到 元素 ，而是绑定到它的父级，因此当触发 click 事件时，父级将事件委托给具有匹配类的所有子级！btnbtnContainerbtn

Answer 2

1. 不要在循环中添加函数

2. 委托

看看这里。有很多问题，我已经解决了其中的几个问题

你可能想做

button.setAttribute("data-code",item.code);

而不是

button.id = i + "-cmd";

// function.js

const content = document.getElementById("content");

content.addEventListener("click",function(e) {

  const tgt = e.target,  // the element clicked

    id = tgt.id; // the ID of the element

  if (id.indexOf("-cmd") !=-1) { // is that element one of our buttons?

   // get the name of the article from the button - this could also be a data attibute

    var pos = id.split("-")[1]; 

    addToCart(pos);

  }  

})

function chargerArticles() {

  const myShoppingCart = catalogArray.map(function(item, i) {

    //Product div

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

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

    //Unique id

    article.id = i + "-article";

    // here would be a good place to add item.name or something

    //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";

    zoneCmd.appendChild(button); //child 2

    //zoneCmd child of article element

    article.appendChild(zoneCmd);

    //finally article as a child of articles 

    articles.appendChild(article);

    content.appendChild(articles) // ???

  })

}

function searchInCart(name) {

  return myCartArray.filter(function(x) {

    return x.name === name

  })[0];

}