프로그래밍 방식으로 addEventListener가 null입니다.

Question

var button = document.createElement("button"); 
button.type = "button"; 

button.className = "button"; 
button.innerText = "OK"; 
button.addEventListener("click", function() { 
    console.log("Hello!"); 
}, false); 

이렇게하면 단추가 해당 이벤트 수신기를 가져 오지 않습니다. attachEvent, button.onclick 시도했는데 아무것도 작동하는 것. 버튼이 클래스와 텍스트와 함께 잘 보입니다.

EDIT : 기본적으로 내가하려는 것은 프로그래밍 방식으로 div의 "팝업"배열을 표시하는 것입니다. 여기

은 어떻게 생겼는지의 스크린 샷입니다 : http://i.imgur.com/IqaOq.png, 나는 아래와 같이 설정

var content = document.createElement("div"); 
//htmlObject.template is the object that has all the info, 'this' is the scrim element that contains each "white" popup" 
content.innerHTML = MessageDialogClass.html.alert(htmlObject.template, this).innerHTML 

: 난 그냥이는 addMessage()입니다 x.addMessage({template: {type: JMTK.Custom.MessageDialog.templates.alert, title: "Alert title", message: "This is a message here", button1: {text: "Hello"}}})

입력 팝업을 추가 한 후, var x = new JMTK.Custom.MessageDialog() 이 함수를 호출

: 나는 버튼을 클릭하면, 다시

alert: function (template, element) { 
    //Array of functions 
    var callbacks = MessageDialogClass.callbacks; 

    var alert = document.createElement("div"); 
    var id = Date.now(); 
    alert.id = id; 

    var header = document.createElement("h1"); 
    header.innerText = (template.title ? template.title : "ALERT"); 

    var paragraph = document.createElement("p"); 
    paragraph.innerText = (template.message ? template.message : "No message specified") 

    var button = document.createElement("button"); 
    button.type = "button"; 

    button.className = "button"; 
    button.innerText = (template.button1.text ? template.button1.text : "OK"); 
    button.addEventListener("click", function() { 
     if (template.button1.callback) { 
      template.button1.callback(); 
     } 

     //MessageDialogClass.popElement(id); 
     //delete callbacks.id; 
    }, false); 

    alert.appendChild(header); 
    alert.appendChild(paragraph); 
    alert.appendChild(button); 

    callbacks.id = alert; 

    return alert; 
},    

하지만 아무 일도 발생하지 않습니다, 그리고에 DOM Explorer에는 onclick 속성이 없습니다.

Answer 1

문제는 제가 '경고'템플릿에 div을 작성한 다음 다른 div의 innerHTML을 해당 div로 설정한다는 것이 었습니다. 따라서 DOM의 일부가 아니기 때문에 이벤트 수신기를 설정할 수 없습니다. alert 이미 div를 반환하기 때문에

var content = document.createElement("div"); 
//htmlObject.template is the object that has all the info, 'this' is the scrim element that contains each "white" popup" 
content.innerHTML = MessageDialogClass.html.alert(htmlObject.template, this).innerHTML 

그래서 대신하고 난 그냥

var content = document.createElement("div"); 
//htmlObject.template is the object that has all the info, 'this' is the scrim element that contains each "white" popup" 
content = MessageDialogClass.html.alert(htmlObject.template, this).innerHTML 

했다. 그래서 네, innerHtml을 DOM 노드와 동일하게 설정하는 것보다 설정해야합니다.

Answer 2

이벤트 수신기를 설정하기 전에 버튼을 추가해야한다고 생각합니다.

Answer 3

귀하의 솔루션이 무엇인지 말할 수 없습니다. 에 대한 자세한 내용은 버튼 클릭과 관련하여이 필요하지만 놀아 볼만한 것이 있습니다. 마우스 클릭을받지 못하도록 버튼 앞에 요소가 있는지 궁금합니다. Windows 8 용 WinJS 프로젝트에있는 것을 보았습니다. VS2012에서 정말 좋은 dev 도구가 있습니다. DOM에 버튼을 추가하고 DOM Explorer로 이동 한 다음 버튼을 찾은 지 확인하십시오. 자바 스크립트 콘솔로 이동하여 버튼에 액세스 할 수 있는지 확인합니다. 이벤트 리스너를 수동으로 추가 할 수 있는지 확인하십시오. 마크 업에서 버튼을 수동으로 추가 한 다음 이벤트 추가가 작동하는지 확인하십시오. 이들 중 하나가 당신을 해결책에 놓기를 희망합니다. 행운을 빕니다.