javascript - 将函数绑定到由 javascript 创建的元素

Question

我想用 javascript 创建一个日历：

我通过这个函数创建元素：

createElem : function (name, attrs){
     var el = document.createElement(name);
     for(var key in attrs) {
        el.setAttribute(key, attrs[key]);
     }
     return el;
}

桌子 ：

var tb=this.createElem("table", {"class":"p-calendar", id: "p-calendar"});

行和单元格：

for(var i=2; i<to; i++){
    tb.insertRow(i);
    for(var j=0; j < 7; j++){
       tb.rows[i].insertCell(j);
       .
       .

---

所以在我的循环中：

tb.rows[i].cells[j].className="day"; // it's work

但 ：

tb.rows[i].cells[j].onclick = function(){
    tb.rows[i].cells[j].id = "today";
}  // Unable to set property 'id' of undefined or null reference 

1. 为什么会报错？！
2. 将函数绑定到由 javascript 创建的元素的最佳方法是什么？

提前致谢。

Answer 1

简短的回答：您需要一个closureonclick 处理程序。

长答案： 您的索引i和循环j递增。当您实际单击元素时，稍后会调用您的处理程序for。猜猜 then的onclick值是多少。它们超出 和 的元素数组的范围。这意味着每个元素都使用相同的值，并且它们都没有在元素数组的范围内获取值。您可以通过记录当前处理程序的值和内部值来验证这一点。ijrowscellsijijonclick

解决方案：

替换块：

tb.rows[i].cells[j].onclick = function(){ ... }

和：

var getOnclickMethod = function (i, j) {
    var cur_i = i * 1;
    var cur_j = j * 1;
    var callback = function(){
        tb.rows[cur_i].cells[cur_j].id = "today";
    };
    return callback;
};

tb.rows[i].cells[j].onclick = getOnclickMethod(i, j);