用javascript动态添加到ontd元素的onclick不起作用

Question

我有一个问题试图弄清楚为什么我动态添加的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);
            }

        }

表的创建工作正常，因此从静态创建的onclick调用函数ChangeNumber() ，但是当我单击动态创建的td时，没有任何反应。 有人可以向我澄清这个问题吗？

Answer 1

快速的JSFiddle表明， 基本方法很好-至少在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);
}

其他问题必须打破。 （尝试启动Firebug或类似工具，然后在控制台中查找JS错误。）

Answer 2

您还可以使用：

td.onclick = ChangeNumber;

ChangeNumber是一个也可以绑定到click的函数，如果将其放置在内部，则可以为每个onclick定制一个函数。

我知道他正面临什么问题，只是onclick函数不会弹出，它不会显示任何日志，如果您使用td.onclick = ChangeNumber(); 那么它将在加载该脚本时触发一次此功能，

Answer 3

您必须将onclick设置为属性。 所以，代替

td.onclick = function() {ChangeNumber('something'); };

你会想要像

td.setAttribute('onclick', "function() {ChangeNumber('something');}");

Answer 4

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

因此，类似：

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

另外，您可以这样输入：

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

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

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

第三种选择是使用事件库。 然后，您将可以执行以下操作：

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

看看这个问题 ，看看我的意思。

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

Answer 5

您的方法似乎很好，请在这里找到：（jsfiddle.net/fa9SV/）

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