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

我有一个函数，它将一些json数据放到一个表中。我试图将点击事件绑定到某些表格元素。在这种情况下，表格有两列'饮料名称'和'饮料类型'。我希望两列有不同的事件，所以我试图给他们类标签，以便我可以将事件绑定到给定的类。如何将点击事件绑定到动态创建的TD？

包装在**中的行是我想要做的伪代码。我试过看一堆东西，不能完全弄清楚这一点......谢谢！

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

来源

2013-11-21 Vanquish46

你有没有对此做过一些研究？你可以尝试'谷歌搜索'有很多答案解释这一点。仅在SO上，您可以通过搜索“jquery bind event to dynamic created element”来获得50多个匹配结果。 –

是你的工作？ –

更换**td.setClassName("drinkEntry");**与$(td).click(viewDrink);。

来源

2013-11-21 08:30:54 leaf

试试这个

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

//Your Codes 

});

来源

2013-11-21 07:56:44

你可以使用方法.on()与document的事件，而不是直接绑定到类（没有ID），因为实例不存在
试试这个：

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

});

来源

2013-11-21 07:56:51

将事件绑定到动态创建您必须使用.on() jQuery函数。

在你的情况应该是这样的：

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

来源

2013-11-21 07:59:10

尝试

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

JsFiddler Demo

你也可以阅读帮助这个充满aticle：Bind events to dynamically created elements using jQuery

来源

2013-11-21 07:59:46

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

回答

相关问题