addEventListener不会将侦听器附加到元素上

/***************************************************** * 
* 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到附加到列表项文本之前的li元素的“x”。这个想法是，“x”是可点击的，onClick它从列表中删除列表项。但我已经尝试了6种方法来周日将eventListener附加到“x”对象，并且没有任何工作。我曾尝试将事件侦听器附加到一个span对象和一个按钮对象;我已经在函数中渲染了“remex.addEventListener ...”，渲染之后，渲染之前等等。我已经取消了CSS;我曾尝试将addEventListener更改为“onClick”;我已经在我们自己的apache服务器上尝试了这个代码，我已经将它移到了jsbin.com，希望某些服务器设置能够适应我的方式;在我尝试过的很多事情中，我可能还记得几件事。正如你看到的，我已经尝试了它作为一个按钮和一个跨度，因此评论代码。addEventListener不会将侦听器附加到元素上

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

来源

2014-03-19 paidforbychrist

['addEventListener']（https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.addEventListener）至少需要两个参数，'removeTodo'是什么？ – Teemu

这就是我的想法，但我尝试过移动“remex.addEventListener（removeTodo）;”之后的行“uList.appendChild（li_element）;”没有成功。下面是修改后的循环代码片段： “ //添加项列出 uList.appendChild（li_element）; remex.addEventListener（removeTodo）; inField.value = ''; ” 虽然它仍然无法正常工作。 – paidforbychrist

是的，removeTodo是一个包含函数的变量名。但问题是，“x”不可点击。即使我错误地调用了函数，“x”是不是仍然是可点击的？ – paidforbychrist

这条线覆盖连接事件侦听：

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的包装。

来源

2014-03-19 17:18:40 Teemu

OMG !!!而已！！！非常感谢你！ – paidforbychrist

我保存此建议供将来参考。再次感谢你！我一直在为此工作好几天！ – paidforbychrist

@ user3438536也许你也想接受答案; ）。 – Teemu

addEventListener不会将侦听器附加到元素上

回答

相关问题