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

时间:2014-03-19 16:37:48

标签: javascript javascript-events event-listener

/***************************************************** *
*  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

此函数根据文本字段输入构建列表。每次&#34;添加项目&#34;单击按钮,事件调用此函数将项目添加到列表中。一切都很美妙直到我尝试将eventListener添加到&#34; x&#34;它附加到列表项文本之前的li元素。这个想法是&#34; x&#34;是可点击的,并点击它从列表中删除列表项条目。但是我已经尝试了6种方法来将星期日的事件附加到&#34; x&#34;对象,没有任何作品。我已经尝试将事件监听器附加到span对象和按钮对象;我已经移动了&#34; remex.addEventListener ......&#34;函数中的所有函数,渲染后,渲染之前等等;我已经淘汰了CSS;我尝试将addEventListener更改为&#34; onClick&#34 ;;我已经在我们自己的apache服务器上尝试了这个代码,我已经把它移到了jsbin.com,希望有些服务器设置正在阻碍我;在我尝试过的一长串清单中,我可以记住更多的事情。如您所见,我已经尝试将其作为按钮和跨度,因此注释代码。

简而言之,无论我尝试什么,eventListener都不会附加到&#34; x&#34;。有任何想法吗?你需要看到更多的代码吗?

1 个答案:

答案 0 :(得分:2)

此行会覆盖附加的eventlistener:

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