Question

我有一个函数，它接受一些json数据并将其放入表中。我正在尝试将click事件绑定到某些表元素。在这种情况下，表格有两列“饮品名称”和“饮品类型”。我希望这两列有不同的事件，所以我试图给它们类标签，这样我就可以将事件绑定到给定的类。

包裹在**中的行是我正在尝试做的伪代码。我已经尝试过看一堆东西而不能完全解决这个问题...谢谢!!

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

您可以使用方法.on()与document将事件直接绑定到类（非id ），因为实例已不存在试试这个：

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

});

Answer 2

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

Answer 3

试试这个

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

//Your Codes

});

Answer 4

要将事件绑定到动态创建的项目，必须使用.on() jQuery函数。

在你的情况下它应该是：

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

Answer 5

试试

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

JsFiddler Demo

您还可以阅读完整的文章：Bind events to dynamically created elements using jQuery

如何将click事件绑定到动态创建的TD？

5 个答案: