我想问一下如何对使用 createElement() 创建的元素执行 addEventListner() 。
我的项目中有一个添加按钮,当我单击它时,它将创建另一个添加按钮,并继续使用该按钮制作添加按钮。
但是我的第一个按钮可以工作并不断创建新按钮,但其他按钮没有任何作用。
这是我的代码。
const addBtn = document.querySelector('.button');
const total = document.getElementById('amount-total');
addBtn.addEventListener('click', addButton);
let counter = 0;
function addButton(){
counter++;
let newDiv = document.createElement('div');
newDiv.id = 'new-container' + counter;
total.parentNode.insertBefore(newDiv, total)
let createBtn = document.createElement('button');
createBtn.innerHTML = '+';
createBtn.className = 'button';
newDiv.appendChild(createBtn);
}
但它不起作用,所以我尝试了 querySelectorAll。
const addBtns = document.querySelectorAll('.button');
addBtns.forEach(btn => btn.addEventListener('click', addButton))
但原来的仍然有效,但其他则不行。 我是 javascript 新手,如果您能帮助我,我将非常感激。
谢谢。
最佳答案
如果我理解正确的话,您应该在函数addbutton()
中添加addEventListener('click', addButton)
。通过这种方式,您每次单击添加的按钮时也会创建一个新按钮。您的代码:
const addBtn = document.querySelector('.button');
const total = document.getElementById('amount-total');
addBtn.addEventListener('click', addButton);
let counter = 0;
function addButton() {
counter++;
let newDiv = document.createElement('div');
newDiv.id = 'new-container' + counter;
total.parentNode.insertBefore(newDiv, total)
let createBtn = document.createElement('button');
createBtn.innerHTML = '+';
createBtn.addEventListener('click', addButton); //added this line here!
createBtn.className = 'button';
newDiv.appendChild(createBtn);
}
希望这有助于您的理解。
关于javascript - addEventListener() 和 createElement(),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60562776/