javascript - Onclick 事件在另一个函数的产品内不起作用

Question

绑定(bind)到 close 类的事件正在处理我的 HTML 中包含的 li，但它不适用于 li code> 是我使用 addItem 函数创建的。我不明白为什么。不过，我将包含类和 textNode 的跨度添加到每个新项目中。

function addCross() {
  let myNodeList = document.getElementsByTagName('li');
  for (let i = 0; i < myNodeList.length; i++) {
    let span = document.createElement('span');
    let cross = document.createTextNode('\u00D7');
    span.className = 'close'
    span.appendChild(cross);
    if (myNodeList[i])
      myNodeList[i].appendChild(span);
  }
}
addCross();

//---------------------------------------------

let close = document.getElementsByClassName('close');
for (let i = 0; i < close.length; i++) {
  close[i].addEventListener('click', function() {
    let cross = close[i].parentElement;
    cross.style.display = 'none';


  });

}

//-----------------------------------------------

function addItem() {
  let ul = document.getElementById('list');
  let inputText = document.getElementById('inputText').value;
  let li = document.createElement('li');
  let textNode = document.createTextNode(inputText)
  let span = document.createElement('span');
  let cross = document.createTextNode('\u00D7');
  span.className = 'close'
  span.appendChild(cross);
  li.appendChild(textNode);
  li.appendChild(span);
  if (inputText === '') {
    alert('enter some task, please')
  } else {
    ul.appendChild(li);
  }

}

```

Answer 1

问题在于它被调用的时间，如果我没有记错的话，additem 是一个由 HTML 标签调用的函数，如果是的话，正确。这是正在发生的事情:

1. 打开页面
2. 加载所有 li 并赋予它们函数
3. 您添加了新的 li

4. 它们具有相同的类名，但它们的单击函数未连接到任何东西解决办法:

   function addclosefunction() {
     let close = document.getElementsByClassName('close');
     for (let i = 0; i < close.length; i++) {
       close[i].addEventListener('click', function() {
         let cross = close[i].parentElement;
         cross.style.display = 'none'
       });
     }
   }
   addclosefunction();
   
   function addItem() {
     let ul = document.getElementById('list');
     let inputText = document.getElementById('inputText').value;
     let li = document.createElement('li');
     let textNode = document.createTextNode(inputText)
     let span = document.createElement('span');
     let cross = document.createTextNode('\u00D7');
     span.className = 'close'
     span.appendChild(cross);
     li.appendChild(textNode);
     li.appendChild(span);
     if (inputText === '') {
       alert('enter some task, please')
     } else {
       ul.appendChild(li);
     }
     addclosefunction();
   }