使用 javascript 动态添加到 td 元素的 Onclick 不起作用答案

【问题标题】：Onclick dynamically added with javascript to td element doesn't work使用 javascript 动态添加到 td 元素的 Onclick 不起作用
【发布时间】：2013-10-28 12:42:01
【问题描述】：

我在试图弄清楚为什么我动态添加的 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 时没有任何反应。有人可以向我解释一下这个问题吗？

【问题讨论】：

td.setAttribute('onclick',"youfunction()");
除了我的回答，这里还有一个建议。如果您右键单击 Google Chrome 中的元素，然后说“检查元素”，或者只是查看页面源代码，您可以检查生成的 TD 的样子。它将缺少“onclick”属性。

标签： javascript html dynamic html-table onclick

【解决方案1】：

你也可以使用：

td.onclick = ChangeNumber;

ChangeNumber 是一个也可以绑定到点击的函数，如果你把这个函数放在里面，你可以为每个点击创建一个自定义函数。

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

【讨论】：

这行得通。我们也可以传递参数。这是示例：td.onclick = ChangeNumber(object);

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

快速的 JSFiddle 显示 basic approach is fine--至少在 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 错误。）

【讨论】：

【解决方案4】：

当创建一个 HTML 元素时，你必须使用 setAttribute 来设置它。此外，您必须将其设为字符串。

所以，类似：

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

或者，你可以这样说：

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

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

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

第三个选项是使用事件库。然后您就可以执行以下操作：

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

查看this question 了解我的意思。

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

【讨论】：

给定的解决方案不起作用。它说“changeSomething”没有定义
您是否执行了Then define your script somewhere on your global object, like this: 步骤？

【解决方案5】：

您必须将onclick 设置为属性。所以，而不是

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

你会想要类似的东西

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

【讨论】：