Javascript Onclick事件不发生'；t在另一个函数的乘积内工作

绑定到

close

类的事件正在处理HTML中包含的

li

，但它不在我使用

addItem

函数创建的

li

上工作。我不明白为什么。不过，我将包含类和textNode的span添加到每个新项中

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);
  }

}

```

函数addCross（）{
让myNodeList=document.getElementsByTagName（'li'）；
for（设i=0；i

问题在于：

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';


  });

}

它在每次迭代中复制

i

值，并在单击处理程序中使用该值

更新：

上述问题存在于共享代码中

单击处理程序将无法处理由

addItem

添加的

li

。因为，事件注册发生在使用

addItem

添加新的

li

之前。 你现在有两个选择

在

ul

上添加一个事件处理程序，标记并管理

关闭

点击

在

addItem

函数中添加事件处理程序，如下所示

问题在于：

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';


  });

}

它在每次迭代中复制

i

值，并在单击处理程序中使用该值

更新：

上述问题存在于共享代码中

单击处理程序将无法处理由

addItem

添加的

li

。因为，事件注册发生在使用

addItem

添加新的

li

之前。 你现在有两个选择

在

ul

上添加一个事件处理程序，标记并管理

关闭

点击

在

addItem

函数中添加事件处理程序，如下所示

---

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

打开页面

加载所有li并赋予它们函数

你加了新的李

它们具有相同的类名，但单击它们时的函数未连接到任何对象 解决方案：

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();
}

function addclosefunction（）{
let close=document.getElementsByClassName（'close'）；
for（设i=0；i

---

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

打开页面

加载所有li并赋予它们函数

你加了新的李

它们具有相同的类名，但单击它们时的函数未连接到任何对象 解决方案：

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();
}

function addclosefunction（）{
let close=document.getElementsByClassName（'close'）；
for（设i=0；i

---

可能是因为它们尚未加载到dom中，请尝试

document.ready（）

或

document.load（）

我建议您为

close

过程/变量创建一个函数。问题是，在创建新元素之前，您使用

close

类获取所有元素，而它不知道新创建的元素。如果您使用函数而不是let，它将在每次执行时获得元素，而不是它应该工作的。当我将整个javascript包装到一个窗口中时。onload=function（）{}它告诉我addItem函数没有定义可能是因为它们仍然没有加载到dom中，请尝试

doc