创建新元素后解决事件问题？

debugcn 发表于 Dev

选择用户

当我单击项目时，它显示了clicked元素，但是在创建新项目后，它不适用于新项目。

我知道这是在第一个项目选择器中 发生的let items = document.querySelectorAll('.item');，它仅在创建新项目后加载页面时保存元素，这不会影响项目选择器。但是我需要修复它。如果我创建新项目，则它应适用于所有项目（新旧项目均适用）。

//for some stuff..
let

    items = document.querySelectorAll('.item');

items.forEach( (elm) =>{
  elm.addEventListener('click', ()=>{
      console.log(
        elm.innerText
      );
  })
});


//create new one
let

  btn = document.querySelector('button'),
  app = document.querySelector('.app-view'),
  dataId = 0;


btn.addEventListener('click', ()=>{
  dataId++;
  
  let 
    
    newItem = document.createElement('div');
  
  newItem.className = 'item';
  newItem.innerHTML = `I am from planet ${dataId}`;
  app.insertAdjacentElement ('beforeend', newItem);
  
});

.item{
  padding: .25rem 1rem;
  font-family: "Helvetica";
  color: purple;
  user-select:none;
  
}

.item:hover{
  cursor: default;
  border: 1px dotted #000;
}

.default-item{
  color: #007bff;
}

button{
  position: fixed;
  top: 1rem;
  right: 1rem;
  padding: .5rem 1rem;
}

<div class="app-view">
  <div class="item default-item">Default Item</div>
</div>

<button>
  Create New
</button>

莱昂内尔·罗

考虑使用事件委托：

const itemContainer = document.querySelector('.app-view');

itemContainer.addEventListener('click', event => {
  if (event.target.classList.contains('item') {
    // do stuff
  }
});

请注意，它必须使用event.target（单击的元素），而不是event.currentTarget（侦听器所连接的元素）。

您可以在此博客文章中找到更多信息：JavaScript事件委托的工作原理