添加到表格的按钮不会触发处理程序答案

【问题标题】：buttons added to table won't fire handler添加到表格的按钮不会触发处理程序
【发布时间】：2014-05-29 23:59:14
【问题描述】：

在我的表格中，我试图在每一行的末尾添加一个编辑按钮。这个想法是让用户单击其中一个来更改行的内容。我可以很好地构建和填充表格，但我无法让按钮触发它们的处理程序。

这是一个代码sn-p：

window.onload = function (){
  // a bunch of stuff happens correctly...

  while (!Rs.EOF)
  {
    var oRow = oTicketsTable.insertRow();

    for (j=0; j < field.length; j++)
    {
      var oCell = oRow.insertCell();

      oCell.style.fontSize = "10";
      oCell.style.fontWeight = "normal";
      oCell.style.border = "thin black solid";
      oCell.innerText = Rs(field[j]);
    }

    var oCell = oRow.insertCell();
    oCell.style.border = "thin black solid";

    var oBtn = document.createElement("button");
    oCell.appendChild(oBtn);

    oBtn.innerHTML = Rs('idnum');
    oBtn.onClick = function () { alert("oBtn.onClick"); }

    Rs.MoveNext();
  }

  Rs.Close ();
  delete Rs;

  var btn = document.createElement("button");
  btn.style.height = "50px";
  btn.style.width = "150px";
  document.body.appendChild(btn);

  btn.innerHTML="button1";
  btn.onclick = function() { alert("button1 calling"); 
}

最后的代码创建了一个可以正常触发的测试按钮。但是表格中的按钮都不起作用。

【问题讨论】：

标签： javascript button event-handling

【解决方案1】：

表格中的onclick函数是驼峰式的：试试改成小写？将 obtn.onClick 更改为 obtn.onclick。

oBtn.onclick = function () { alert("oBtn.onClick"); }

【讨论】：

【解决方案2】：

试试：

oBtn.onclick = function () { alert("oBtn.onClick"); }

Rs.MoveNext();
}

代替：

oBtn.onClick = function () { alert("oBtn.onClick"); }

Rs.MoveNext();
}

大写的'C'，应该只是'c'

【讨论】：

【解决方案3】：

如果我没记错的话，你应该把你的事件放在外面，作为全局的。

var oBtn,btn;
window.onload = function (){

    // other code

    // other code

    oBtn = document.createElement("button");
    oBtn.innerHTML = Rs('idnum');


    btn = document.createElement("button");
    btn.style.height = "50px";
    btn.style.width = "150px";
    document.body.appendChild(btn);

    btn.innerHTML="button1";

}

// make your event global
oBtn.onClick = function () { alert("oBtn.onClick"); }
btn.onclick = function() { alert("button1 calling"); }

.onClick 是一种古老的做法。但我认为它只会提示您警告，而不是错误。

【讨论】：