在我的代码中,动态按钮的 OnClick() 事件在 JavaScript 中不起作用

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

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

http://img3.mukewang.com/633560ae00016bf005480094.jpg

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

  }

}


哈士奇WWW
浏览 231回答 2
2回答

米脂

出现此问题的原因是您动态定义。换句话说,在页面的初始呈现过程中未定义此元素。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

天涯尽头无女友

不要在循环中添加函数委托看看这里。有很多问题,我已经解决了其中的几个问题你可能想做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];}
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript