首頁猿問在我的代碼中，動態按鈕的...

在我的代碼中，動態按鈕的 OnClick（）事件在 JavaScript 中不起作用

JavaScript

哈士奇WWW 2022-09-29 17:08:41

我使用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); }}

查看完整描述

2 回答

米脂

TA貢獻1836條經驗獲得超3個贊

出現此問題的原因是您動態定義。換句話說，在頁面的初始呈現過程中未定義此元素。myfunction1

您可以使用事件委派來修復它。操作方法如下：

不要在元素上定義回調，而是為具有匹配 css 類的 PARENT 元素的所有子元素定義回調。例如：

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

    });

哪里：

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

現在，當您動態添加帶有（類名）的按鈕作為的子級時，它們仍將訪問單擊處理程序，因為事件處理程序不綁定到元素，而是綁定到它的父級，因此當觸發 click 事件時，父級將事件委托給具有匹配類的所有子級！btnbtnContainerbtn

反對回復 2022-09-29

天涯盡頭無女友

TA貢獻1831條經驗獲得超9個贊

不要在循環中添加函數
委托

看看這里。有很多問題，我已經解決了其中的幾個問題

你可能想做

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];

}

反對回復 2022-09-29

2 回答
0 關注
265 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

在我的代碼中，動態按鈕的 OnClick（） 事件在 JavaScript 中不起作用

在我的代碼中，動態按鈕的 OnClick（） 事件在 JavaScript 中不起作用

2 回答

添加回答

在我的代碼中，動態按鈕的 OnClick（）事件在 JavaScript 中不起作用

在我的代碼中，動態按鈕的 OnClick（）事件在 JavaScript 中不起作用