javascript - onclick 不适用于按钮输入

Question

这很简单:

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

它不会在控制台中显示点击。如果我尝试使用 chrome 开发工具将它直接放在输入标题中，它会输出文本，所以我知道该按钮有效。我只是不知道为什么当我用 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

When you use innerHTML the element's content gets reparsed. The elements are removed and recreated, which in turn removes the event handler. Much better would be to use DOM manipulation.

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>