使用 javascript 动态添加到 td 元素的 Onclick 不起作用
Onclick dynamically added with javascript to td element doesn't work
我在试图弄清楚为什么我的动态添加的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 时,没有任何反应。有人可以向我澄清问题吗?
一个快速的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错误。
您还可以使用:
td.onclick = ChangeNumber;
ChangeNumber
是一个也可以绑定到单击的函数,如果您将此函数放在其中,则可以为每个 onClick 创建一个自定义函数。
我知道他面临什么问题,只是 onclick 函数不会弹出,它不显示任何日志,如果您使用该td.onclick = ChangeNumber();
,那么它在加载此脚本时只会触发此功能一次,
您必须将onclick
设置为属性。所以,而不是
td.onclick = function() {ChangeNumber('something'); };
你会想要类似的东西
td.setAttribute('onclick', "function() {ChangeNumber('something');}");
创建 HTML 元素时,必须使用 setAttribute 来设置它。此外,您必须将其设置为字符串。
所以,像这样:
td.setAttribute('onclick', 'function(){change("Something")}');
或者,你可以这样说:
td.setAttribute('onclick', 'changeSomething();');
然后在全局对象上的某个位置定义脚本,如下所示:
changeSomething = function() {
// do the change
}
第三个选项是使用事件库。然后,您将能够执行以下操作:
Event.on(td, 'click', changeSomething);
看看这个问题,看看我的意思。
附言这超出了这个问题的范围,但最好不要在全局对象上绑定内容。使用模块或其他东西。
你的方法似乎很好,请在这里找到: (jsfiddle.net/fa9SV/)
请交叉检查文档中是否存在所有ID。希望这有帮助!
- 如何使用jquery迭代具有相同属性的html元素并查找onclick事件
- 如何通过它瞄准javascript元素's的onclick属性
- 将多个元素绑定到同一onclick
- 如何在动态创建元素的内联onclick事件中传递对象
- Onclick函数更改为所有更改元素的相同函数
- 为onClick-hander插入临时DOM元素
- 元素onClick无法使用ngClick
- 将列表元素 onclick 事件绑定到单选输入
- 滚动到一个元素 onClick JavaScript
- 创建 D3.js 元素 OnClick 事件的放大副本
- 单击span时获取附近的输入元素(onclick事件)
- 使用纯javascript获取li元素onclick,而不对每个元素应用onclick
- 需要通过元素onclick函数停止执行Javascript onclick函数
- 我怎么得到元素.onclick在Firefox中工作
- JavaScript服务器元素onclick事件
- 从JavaScript字符串中设置元素onclick
- Javascript的元素.onclick = functionName(作为字符串)
- 显示HTML元素onclick事件
- 选项元素onclick事件修复chrome
- 如何在不触发父元素onclick的情况下触发元素的onclick