Как связать событие click с динамически создаваемыми TD?

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

Заменить **td.setClassName("drinkEntry");** с $(td).click(viewDrink);.

Answer 2

Попробуйте

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

//Your Codes 

}); 

Answer 3

вы можете использовать метод .on() с document связать событие, а не непосредственно к классу (не ид), так как экземпляр уже не существует
попробовать это :

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

}); 

Answer 4

Чтобы связать событие с динамически созданным вы должны использовать функцию jQuery .on().

В вашем случае она должна выглядеть так:

$('#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