事件監聽器不起作用

Question

任何想法為什么這不起作用。

單擊時按是按鈕可以使用一次 - 否按鈕不起作用

 function $(x) { return document.getElementById(x); } var glob = 0; function new_index() { glob += 1; return "d" + glob; } function play() { say("Hello is JS Fun?"); response("No", function() { say("Oh dear") }); response("Yes", function() { say("Great:"); }); } function say(x) { $("txt").innerHTML += x; } function response(Txt, Fun) { var n = new_index(); var s = "<button id='" + n + "'>" + Txt + "</button>"; say(s); var xx = $(n); // xx.onclick=Fun; xx.addEventListener("click", Fun); } play(); 

 <div id="txt"></div> 

Answer 1

這是因為每次設置innerHTML時，它都不會像您想象的那樣添加，它會將innerHTML設置為一個新值，並通過附加舊事件偵聽器來刪除舊元素。

Answer 2

正如其他人所提到的，代碼中的主要問題是你在后續的innerHTML調用中丟失了事件綁定 - 沒有停止工作，因為它是在Yes之后。 當“是”附加文本時，它會自行中斷。

使用DOM時，最好創建元素而不是改變HTML文本（使用innerHTML ）。 對於你的按鈕，它意味着你不必（1）創建一個帶有ID的按鈕，然后（2）找到按鈕。 使用createElement您可以引用它。

 function $(x) { return document.getElementById(x); } var glob = 0; function new_index() { glob += 1; return "d" + glob; } function play() { say(text("Hello is JS Fun?")); response("No", function() { say(text("Oh dear")); }); response("Yes", function() { say(text("Great:")); }); } function text(String) { var node = document.createElement("span"); node.innerHTML = String; return node; } function say(x) { $("content").appendChild(x); } function response(Txt, Fun) { var button = document.createElement("button"); button.innerHTML = Txt; button.addEventListener("click", Fun); say(button); } play(); 

 <div id="content"></div> 

Answer 3

事件處理程序在$("txt").innerHTML += x;上丟失$("txt").innerHTML += x; 。