如何將點擊事件綁定到動態創建的TD？

Question

我有一個函數，它將一些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);** 
      } 

Answer 1

更換**td.setClassName("drinkEntry");**與$(td).click(viewDrink);。

Answer 2

試試這個

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

//Your Codes 

}); 

Answer 3

你可以使用方法.on()與document的事件，而不是直接綁定到類（沒有ID），因爲實例不存在
試試這個：

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

}); 

Answer 4

將事件綁定到動態創建您必須使用.on() jQuery函數。

在你的情況應該是這樣的：

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

Answer 5

嘗試

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

JsFiddler Demo

你也可以閱讀幫助這個充滿aticle：Bind events to dynamically created elements using jQuery