javascript - 如何将点击事件绑定(bind)到动态创建的 TD？

Question

我有一个函数，它接受一些 json 数据并将其放入表中。我正在尝试将单击事件绑定(bind)到某些表格元素。在本例中，该表有两列“饮料名称”和“饮料类型”。我希望这两列具有不同的事件，因此我尝试为它们提供类标签，以便我可以将事件绑定(bind)到给定的类。

用 ** 包裹的行是我想要做的伪代码。我尝试过查看很多东西，但不太明白......谢谢!!

function totable(data){
                var d = document.getElementById("drinkList");
                d.setAttribute("class","panel panel-default");
                var dd = document.createElement("div");
                dd.setAttribute("class","panel-heading");
                dd.appendChild(document.createTextNode("Drink list"));
                d.appendChild(dd);
                var mytable = document.createElement("table");
                mytable.setAttribute("class","table");
                var thr = document.createElement("tr");
                for(var key in data[0]){
                    var th = document.createElement("th");
                    th.appendChild(document.createTextNode(key));
                    thr.appendChild(th);
                }
                mytable.appendChild(thr);
                for(var i=0;i<data.length;i++){
                    var r = document.createElement("tr");
                    for(var key in data[i]){
                        var td = document.createElement("td");
                        **td.setClassName("drinkEntry");**
                        td.appendChild(document.createTextNode(data[i][key]));
                        r.appendChild(td);
                    }
                    mytable.appendChild(r);
                }
                d.appendChild(mytable);
                **$("#drinkEntry").on("click", viewDrink);**
            }

Answer 1

将 **td.setClassName("drinkEntry");** 替换为 $(td).click(viewDrink);。