Question

绑定到close类的事件正在处理HTML中包含的li，但不适用于我用{创建的li {1}}功能。我不知道为什么。不过，我将包含类和textNode的跨度添加到每个新项中。

addItem

Answer 1

问题在这里：

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


  });

}

click处理程序将起作用！但是，在调用i时，它将是迭代中的最后一个值。

尝试一下：

let close = document.getElementsByClassName('close');
for (let i = 0; i < close.length; i++) {

  const handler = ((index) => {
    return function() {
      let cross = close[index].parentElement;
      cross.style.display = 'none';
    };
  })(i);

  close[i].addEventListener('click', handler);

}

这将在每次迭代中复制i值，并在点击处理程序中使用它。

更新：

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

点击处理程序不适用于li添加的addItem。因为，事件注册发生在使用li添加的新addItem之前。您现在有2个选择。

在ul标签上添加一个事件处理程序，并管理close点击。 https://i.imgur.com/cavNtcr.jpg。
按如下所示在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);
  span.addEventListener('click', function() {
    let cross = span.parentElement;
    cross.style.display = 'none';
  });
  li.appendChild(textNode);
  li.appendChild(span);
  if (inputText === '') {
    alert('enter some task, please')
  } else {
    ul.appendChild(li);
  }

}

Answer 2

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

打开页面
加载所有li并赋予它们功能
您添加了新的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();
}

Onclick事件在另一个函数的乘积内不起作用

2 个答案: