时间戳

首页 > 解决方案 > addEventListener() 和 createElement()

javascript - addEventListener() 和 createElement()

问题描述

我想问一下如何对使用 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 新手，如果您能帮助我，我将不胜感激。

谢谢你。

标签： javascriptaddeventlistenercreateelement

解决方案

如果我理解正确，您应该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);
}

希望这有助于您的理解。

推荐阅读