我想问一下如何对我用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的新手,如果您能帮助我,我将非常感谢。
谢谢。
如果我理解正确,则应在函数addEventListener('click', addButton)
中添加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);
}
希望这有助于您的理解。