onclick不适用于按钮输入

Question

这很简单：

    var previous = document.createElement("input");
    previous.type = "button";
    previous.value = "<-";
    previous.className = "leftBtn";
    previous.onclick = function(){
        console.log("CLICK");
    };

它不会在控制台中显示单击。 如果我尝试使用chrome dev工具将其直接放在输入标题中，它会输出文本，因此我知道按钮有效。 当我用javascript分配函数时，我只是不知道为什么它不起作用。

编辑：

 function createCalandar(id, year, month){ var date = new Date(year, month, 0); var daysInMonth = date.getDate(); console.log(id+" "+year+" "+month); var size = Math.sqrt(daysInMonth); var currentDay = 1; var header = document.createElement("div"); header.className = "staticHeader"; var previous = document.createElement("input"); previous.type = "button"; previous.value = "<-"; previous.className = "leftBtn"; previous.onclick = function(){ console.log("CLICK"); }; var next = document.createElement("input"); next.type = "button"; next.value = "->"; next.className = "rightBtn"; header.appendChild(previous); header.appendChild(next); var table = document.createElement("table"); table.className = "calandar"; for(var x=0; x < size; x++){ var row = document.createElement("tr"); for(var y=0; y < size; y++){ var col = document.createElement("td"); row.appendChild(col); if(currentDay <= daysInMonth){ col.innerHTML = currentDay; col.onclick = function(e){ console.log(currentDay); } } currentDay++; } table.appendChild(row) } var htmlLocation = document.getElementById(id); htmlLocation.innerHTML = header.outerHTML+"<br />"+table.outerHTML; } function createCalandarNow(id){ var date = new Date(); createCalandar(id, date.getYear(), date.getMonth()); } function nextCalandar(){ } function lastCalandar(){ } createCalandarNow("calandar"); 

 html,body{ margin:0; padding:0; } #calandar{ position:absolute; right:10; bottom:20; width:200; height:200; } #calandar input{ width:50%; cursor:pointer; } #calandar .leftBtn{ position:absolute; left:0; } #calandar .rightBtn{ position: absolute; right:0; } .calandar{ border:1px solid gray; width:100%; height:100%; text-align: center; } .calandar td{ border:1px solid white; } .calandar td:hover{ background-color:lightgray; cursor:pointer; } .calandar .staticHeader{ position:static; } 

 <title>Scheduler</title> <div id="content"> <div id="calandar"> </div> </div> 

Answer 1

当您使用innerHTML时，元素的内容将被重新分析。 删除并重新创建元素，然后删除事件处理程序。 更好的是使用DOM操作。

 function createCalandar(id, year, month) { var date = new Date(year, month, 0); var daysInMonth = date.getDate(); console.log(id + " " + year + " " + month); var size = Math.sqrt(daysInMonth); var currentDay = 1; var header = document.createElement("div"); header.className = "staticHeader"; var previous = document.createElement("input"); previous.type = "button"; previous.value = "<-"; previous.className = "leftBtn"; previous.addEventListener("click", function() { console.log("CLICK"); }); var next = document.createElement("input"); next.type = "button"; next.value = "->"; next.className = "rightBtn"; header.appendChild(previous); header.appendChild(next); var table = document.createElement("table"); table.className = "calandar"; for (var x = 0; x < size; x++) { var row = document.createElement("tr"); for (var y = 0; y < size; y++) { var col = document.createElement("td"); row.appendChild(col); if (currentDay <= daysInMonth) { col.innerHTML = currentDay; col.onclick = function(e) { console.log(currentDay); } } currentDay++; } table.appendChild(row) } var htmlLocation = document.getElementById(id); //htmlLocation.innerHTML = header.outerHTML+"<br />"+table.outerHTML; htmlLocation.appendChild(header); htmlLocation.appendChild(document.createElement("br")); htmlLocation.appendChild(table); } function createCalandarNow(id) { var date = new Date(); createCalandar(id, date.getYear(), date.getMonth()); } function nextCalandar() { } function lastCalandar() { } createCalandarNow("calandar"); 

 html, body { margin: 0; padding: 0; } #calandar { position: absolute; right: 10; bottom: 20; width: 200; height: 200; } #calandar input { width: 50%; cursor: pointer; } #calandar .leftBtn { position: absolute; left: 0; } #calandar .rightBtn { position: absolute; right: 0; } .calandar { border: 1px solid gray; width: 100%; height: 100%; text-align: center; } .calandar td { border: 1px solid white; } .calandar td:hover { background-color: lightgray; cursor: pointer; } .calandar .staticHeader { position: static; } 

 <title>Scheduler</title> <div id="content"> <div id="calandar"> </div> </div>