javascript - OnClick() 事件在 JavaScript 中不适用于我的代码中的动态按钮

Question

我使用 JavaScript 在网页上的 for 循环内添加了一个动态按钮，并为每个按钮分配了一个唯一的 ID。我想为每个按钮分配 onclick() 事件监听器，但该函数没有分配给任何动态按钮。请帮我解决这个问题。谢谢。

myfunction()is working but myfunction1() has some problem. I cannot see onclick event in its dynamically HTML.

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

function searchInCart(name) //T-Shirt
{
  myShoppingCart = myCartArray;
  var name1 = name;
  var stop = 0;
  for (var i = 0; i < myShoppingCart.length && stop == 0; i++) {
    if (myShoppingCart[i].name == name1) {
      stop = 1;
      // console.log("Hello wooooorld!");
      return true;
    } else {
      return false;
    }
  }

}

function addToCart(pos) {

  if (searchInCart(catalogArray[pos].name)) {
    alert("Already Exist!"); // display string message

  } else {
    var ident = pos + "-qte";
    var quatity = document.getElementById("ident").value;
    if (quatity > 0) {
      var articleCmd = {}; //array of  objects
      articleCmd.name = catalogArray[pos].name;
      articleCmd.price = catalogArray[pos].price;
      articleCmd.qte = quatity;
      articleCmd.priceTotal = articleCmd.price * articleCmd.qte;
      myCartArray.push(articleCmd);

    } else {
      // alert
    }
  }

}


//data.js

// data.js
var catalogArray = [{
    code: 100,
    name: "T Shirt c100",
    desc: "Lorem ipsum, or lipsum as it is sometimes known as",
    price: 150,
    image: "./images/img100.jpg"
  },
  {
    code: 101,
    name: "T Shirt c101",
    desc: "Lorem ipsum, or lipsum as it is sometimes known as",
    price: 250,
    image: "./images/img101.jpg"
  },

];



var myCartArray = [{
    name: "T Shirt c100",
    price: 150,
    qte: 2,
    TotalPrice: 150,
  }

];

Answer 1

出现此问题的原因是您动态定义了 myfunction1。换句话说，该元素在页面的初始呈现期间并未定义。

您可以通过使用事件委托(delegate)来修复它。方法如下:

不要在元素上定义回调，而是为具有匹配 css 类的 PARENT 元素的所有子元素定义回调。例如:

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

    });

哪里:

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

现在，当您动态添加具有(类名 btn)的按钮作为 btnContainer 的子级时，它们仍然可以访问点击处理程序，因为事件处理程序不是t 绑定(bind)到元素 btn，但绑定(bind)到它的父级，因此当触发单击事件时，父级将事件委托(delegate)给它的所有子级与匹配的类!