/***************************************************** *
* 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”。有任何想法吗?您需要查看更多代码吗?
最佳答案
这一行覆盖了附加的事件监听器:
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
。
关于javascript - addEventListener 不会将监听器附加到元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22512467/