動的に追加された要素にイベントハンドラをアタッチする

Question

私は要素を動的に追加し、それにイベントハンドラを追加するjavascriptコードを持っています。
このイベントハンドラは、要素が追加されたときに呼び出され（および消滅します）
（イベントハンドラが正常に追加されたかどうかを調べるために）inspectorを介して動的に追加された要素が表示されたときに、onchnage="texttol(eletext)"関数が追加されています。

eletext = document.createElement("input"); 
eletext.type="text"; 
eletext.placeholder = "Type Here"; 
eletext.onchange=texttol(eletext); 
event.target.appendChild(eletext); 

Answer 1

この行では、texttolメソッドを呼び出して、それが何かをイベントハンドラに添付します。

eletext.onchange=texttol(eletext); 

あなたは要素がDOMに実際になるとハンドリング、あなたのイベントを追加addEventListenerを

Answer 2

を使用し、より良い閉鎖

eletext.onchange = function() { texttol(eletext) }; 

を使用する必要があります。

var eletext = document.createElement("input"); 
 
eletext.type = "text"; 
 
eletext.placeholder = "Type Here"; 
 
eletext.id = "eletext"; 
 
document.body.appendChild(eletext); 
 

 
eletext.addEventListener('change', function(e) { 
 
    texttol(eletext.value); 
 
}, false); 
 

 
function texttol(str) { 
 
    alert('texttol function passes: ' + str); 
 
}