Javascript 如何将单击事件绑定到动态创建的TDs？

我有一个函数，它获取一些json数据并将其放入表中。我正在尝试将单击事件绑定到某些表元素。在这种情况下，该表有两列“饮料名称”和“饮料类型”。我希望这两列具有不同的事件，因此我尝试为它们提供类标记，以便将事件绑定到给定的类

用**包装的行是我试图做的伪代码。我试着看了很多东西，但还是不太明白…谢谢

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);**
            }

功能可挂起（数据）{
var d=document.getElementById（“drinkList”）；
d、 setAttribute（“类”、“面板默认值”）；
var dd=document.createElement（“div”）；
dd.setAttribute（“类别”、“面板标题”）；
dd.appendChild（document.createTextNode（“饮料列表”））；
d、 儿童（dd）；
var mytable=document.createElement（“表”）；
setAttribute（“类”、“表”）；
var thr=document.createElement（“tr”）；
for（数据[0]中的var键）{
var th=document.createElement（“th”）；
appendChild（document.createTextNode（key））；
附肢儿童（th）；
}
mytable.appendChild（thr）；
对于（var i=0；i试试这个

$('body').on('click','#drinkEntry',function(){

//Your Codes

});

您可以将方法
.on（）
与
document
一起使用，将事件直接绑定到类（而不是id），因为实例不存在

试试这个：

$(document).on("click",".drinkEntry", function(){

});

要将事件绑定到动态创建的项，必须使用jQuery函数

在您的情况下，它应该如下所示：

$('#drinkEntry').on("click", function () {
    //logic
});

试用

$('body').on('click', 'td.drinkEntry', function() {
    alert("td clicked");
});


您也可以阅读帮助全文：
用
$（td）替换
**td.setClassName（“drinkEntry”）；**
。单击（查看饮料）；
您对此做过一些研究吗？您可以尝试“谷歌搜索”，有很多答案可以解释这一点。仅此一项，您就可以通过搜索获得50多个匹配结果“jquery将事件绑定到动态创建的元素”。这对您有用吗？？