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 

이 함수는 텍스트 필드 입력을 기반으로 목록을 작성합니다. "항목 추가"버튼을 클릭 할 때마다 이벤트가이 함수를 호출하여 항목을 목록에 추가합니다. List 항목 텍스트 앞에 li 요소에 추가 된 "x"에 eventListener를 추가하려고 시도 할 때까지 모든 것이 아름답게 작동합니다. 아이디어는 "x"를 클릭 할 수 있으며 onClick은 목록 항목 항목을 목록에서 제거합니다. 하지만 일요일에 eventListener를 "x"객체에 연결하는 6 가지 방법을 시도했지만 아무 것도 작동하지 않습니다. 스팬 객체와 버튼 객체에 이벤트 리스너를 연결하려고했습니다. 나는 "remex.addEventListener ..."를 함수 안에서, 렌더링 된 후에, 렌더링되기 전에 옮겼습니다. 나는 css를 제거했다; addEventListener를 "onClick"으로 변경하려고했습니다. 나는이 코드를 우리 자신의 아파치 서버에서 시도했다. 나는 그것을 jsbin.com으로 옮겼다. 아마 내가 시도한 것들의 긴 목록에서 기억할 수없는 몇 가지 더. 보시다시피, 저는 버튼과 스팬 (span)으로 주석을 달았습니다. 간단히 말해서, 내가 뭘하려해도 eventListener는 "x"에 붙지 않을 것이다. 어떤 아이디어? 더 많은 코드가 필요합니까? innerHTML이 li_element 내의 모든 원래의 요소를 대체 설정

li_element.innerHTML += tdArray[i]; 

:

Answer 1

이 줄은 첨부의 EventListener 우선합니다. tdArray[i] 그냥 텍스트가 포함 된 경우 +=이 li_element.innerHTML = li_element.innerHTML + tdArray[i];

단지 바로 가기, 당신은 다음과 같은 내용을 추가 할 수 있습니다 tdArray[i]이 요소를 포함

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

경우에는 래퍼 요소를 추가 한 다음 innerHTML을 설정할 수 있습니다 래퍼의