Onclick动态添加javascript到td元素'；行不通

我在试图弄清楚为什么动态添加的onclick事件不起任何作用时遇到了问题。我已经搜索了很多网站，但我尝试的都没有成功。了解自己可能是某种愚蠢的错误，但我真的想知道我做错了什么。这是我的代码的一部分，包括相关功能：

        function ChangeNumber(line){   //this is just a test function so far :)
            document.getElementById('maincol').innerHTML += line + "<br/>"; //just adds "something to the end of a div"
        }

        function ChangeSize()
        {
            var rows, cols;
            rows = document.getElementById('rows').value;
            cols = document.getElementById('cols').value;

            var tbody = document.getElementById('model');
            tbody.innerHTML = "";

            for (var i = 0; i < rows; i++){
                var tr = document.createElement('tr');
                for (var j = 0; j < cols; j++){
                    var td = document.createElement('td');
                    td.setAttribute('name', (i * cols) + (j + 1));
                    td.onclick = function() {ChangeNumber('something'); };
                    td.innerHTML = "0";
                    tr.appendChild(td);
                }
                tbody.appendChild(tr);
            }

        }

函数ChangeNumber（line）{//目前为止，这只是一个测试函数：）
document.getElementById（'maincol'）.innerHTML+=line+“
”；//只是在div的末尾添加了“某物”
}
函数ChangeSize（）
{
var行，cols；
rows=document.getElementById（'rows'）.value；
cols=document.getElementById（'cols'）.value；
var tbody=document.getElementById（'model'）；
tbody.innerHTML=“”；
对于（变量i=0；i

---

表的创建工作正常，从静态创建的onclick调用函数

ChangeNumber（）

，但当我单击动态创建的td时，什么也没有发生。有人能向我解释一下这个问题吗？

您必须将

onclick

设置为一个属性。因此，与其

td.onclick=function（）{ChangeNumber（'something'）；}；

你会想要像这样的东西

setAttribute（'onclick'，“function（）{ChangeNumber（'something'）；}）；

创建HTML元素时，必须使用setAttribute进行设置。此外，您必须将其设置为字符串

比如说：

td.setAttribute('onclick', 'function(){change("Something")}');

Event.on(td, 'click', changeSomething);

或者，您可以这样说：

td.setAttribute('onclick', 'changeSomething();');

changeSomething = function() {
// do the change
}

然后在全局对象的某个位置定义脚本，如下所示：

td.setAttribute('onclick', 'changeSomething();');

changeSomething = function() {
// do the change
}

第三个选项是使用事件库。然后你可以做一些类似的事情：

td.setAttribute('onclick', 'function(){change("Something")}');

Event.on(td, 'click', changeSomething);

看看我的意思

---

另外，这超出了这个问题的范围，但最好不要将内容绑定到全局对象上。使用一个模块或其他东西。

快速的JSFIDLE显示——至少在Chromium中

tbody_x = document.getElementById('x');
tbody_x.innerHTML = '';

for (row = 0; row < 5; row++)
{
  tr = document.createElement('tr');

  for (col = 0; col < 10; col++) 
  {
    td = document.createElement('td');
    td.setAttribute('name', 'r' + row + 'c' + col);
    td.onclick = function() { ChangeNumber('hi'); };
    td.innerHTML = '0';
    tr.appendChild(td);
  }

  tbody_x.appendChild(tr);
}

tbody_x=document.getElementById（'x'）；
tbody_x.innerHTML=''；
用于（行=0；行<5；行++）
{
tr=document.createElement（'tr'）；
用于（列=0；列<10；列++）
{
td=document.createElement（'td'）；
td.setAttribute（'name'，'r'+行+'c'+列）；
td.onclick=function（）{ChangeNumber（'hi'）；}；
td.innerHTML='0'；
tr.appendChild（td）；
}
t身体附肢儿童（tr）；
}

---

一定有别的东西坏了。（尝试启动Firebug或类似程序，并在控制台中查找JS错误。）

您的方法似乎很好，请在此处查找： （jsfiddle.net/fa9SV/）

请交叉检查文档中是否存在所有ID。希望这有帮助

您还可以使用：

td.onclick = ChangeNumber;

ChangeNumber

是一个也可以绑定到click的函数，如果将此函数放在内部，则可以为每个onclick创建一个自定义函数

---

我知道他面临什么问题，只是onclick函数不会弹出，它不会显示任何日志，如果使用

td.onclick=ChangeNumber（）然后在加载此脚本时只需启动此函数一次，
td.setAttribute（'onclick'，'youfunction（）'）；除了我的答案，这里还有一个建议。如果您右键单击Google Chrome中的元素，然后说“Inspect element”，或者只是查看页面源代码，您可以检查生成的TD是什么样子的。它将缺少“onclick”属性。给定的解决方案不起作用。它说“changeSomething”没有定义。您可以执行
操作，然后在全局对象的某个位置定义脚本，如下所示：
步骤？这很有效。我们也可以通过辩论。下面是示例：td.onclick=ChangeNumber（对象）；