javascript - addEventListener 不会将监听器附加到元素

Question

/***************************************************** *
*  Function: renderTodos                             
*  Builds a list of todo items from an array
*  rebuilds list each time new item is added to array
****************************************************** */
function renderTodos(arr) {

  // erases all previous content
  uList.innerHTML = '';

  for ( var i = 0; i < tdArray.length; i++ ) {

    // create a link element
    var remex = document.createElement('span');
    //link element didn't work so try a button
    //var remex = document.createElement('input');
        //remex.setAttribute('type','button');
        remex.setAttribute('class', 'deletex');
        remex.innerHTML="X";
        // set attribute index and value
        remex.setAttribute('index', i);
        remex.addEventListener('click',removeTodo);
    console.dir(remex);   

        // create <li> element
    var li_element = document.createElement('li');
        li_element.style.lineHeight = "20pt";
        li_element.appendChild(remex);
        li_element.innerHTML += tdArray[i];

    // add item to list
    uList.appendChild(li_element);
    inField.value = '';
  }

} // /renderTodos

此函数基于文本字段输入构建列表。每次单击“添加项目”按钮时，事件都会调用此函数将项目添加到列表中。一切都很好，直到我尝试将 eventListener 添加到 "x" 中，该 "x" 附加到列表项文本之前的 li 元素。这个想法是 "x" 是可点击的，而 onClick 它会从列表中删除列表项条目。但是我已经尝试了 6 种方法到星期天将 eventListener 附加到“x”对象，但没有任何效果。我尝试将事件监听器附加到一个跨度对象和一个按钮对象；我已经在函数中移动了“remex.addEventListener...”，在它被渲染之后，在它被渲染之前等等；我已经删除了 CSS；我尝试将 addEventListener 更改为 onClick；我已经在我们自己的 Apache 服务器上尝试过这段代码，我已将它移至 jsbin.com，希望某些服务器设置妨碍了我；在我尝试过的一长串事情中，可能还有一些我不记得的事情。如您所见，我已将其作为按钮和跨度进行了尝试，因此使用了注释代码。

简而言之，无论我尝试什么，eventListener 都不会附加到“x”。有任何想法吗？您需要查看更多代码吗？

Answer 1

这一行覆盖了附加的事件监听器:

li_element.innerHTML += tdArray[i];

设置 innerHTML 替换 li_element 中的所有原始元素。 += 只是 li_element.innerHTML = li_element.innerHTML + tdArray[i];

的快捷方式

如果 tdArray[i] 只包含一些文本，您可以像这样添加它的内容:

li_element.appendChild(document.createTextNode(tdArray[i]));

如果 tdArray[i] 包含元素，您可以附加一个包装元素，然后设置包装的 innerHTML。