如何为每个动态创建的按钮引用不同的onclick方法？

我有一个用JSON数据创建表的脚本。在每行内部，我有两个文本和一个按钮。按钮的onlick方法应该转到其他HTML页面，该页面将填充以前表中同一行的两个文本。首先，我试图打印控制不同的按钮的onclick不同的文本。这里是一块应该这样做：如何为每个动态创建的按钮引用不同的onclick方法？

for (var i in json) { 
var row = table.insertRow(0); 
var cel1 = row.insertCell(0); 
var cel2 = row.insertCell(1); 
var cel3 = row.insertCell(2); 
cel1.innerHTML = json[i].nome; 
cel2.innerHTML = json[i].idade; 
var b = document.createElement("BUTTON"); 
var idd = "id" + i; 
b.setAttribute("id", idd); 
var t = document.createTextNode("Loja"); 
b.appendChild(t); 
b.onclick = function(event) { 
    console.log(idd); 
} 
cel3.appendChild(b);

虽然这与所有正确的ID的正确创建一个表，所有按钮的按下打印最后idd价值，而不是相匹配的ID按钮之一。任何人都知道如何解决这个问题或者更好的实现方法？

来源

2016-11-25 GabrielRado

使用'事件委托' – Mahi

那么这是一个封闭问题..尝试console.log（this.id）instea d。你也可以通过b.id来设置它 - 不需要id上的setAttribute。 – Lain

我看到的主要问题是，你正在登录的变量IDD。这个变量在for循环之后和你点击按钮之后有一个静态值。

相反，你应该尝试：

b.onclick = function(event) { 
    console.log(this.id); 
}

另外一个可以设置ID，而无需通过其属性设置一个属性：

b.id = idd;

这里是很容易想象它的一个例子：

for(var i=0, j=9; i<j; i++){ 
    var tB = document.body.appendChild(document.createElement('button')); 
    tB.id = tB.innerHTML = i; 
    tB.onclick = function(){ 
     console.log(i, this.id) //logs 9 (i is now statically 9) and the buttons id 
    } 
}

来源

2016-11-25 12:28:10 Lain

如何为每个动态创建的按钮引用不同的onclick方法？

回答

相关问题