javascript - How to click on a td created using jquery? -

this question has answer here:

• event binding on dynamically created elements? 19 answers

html code

 <input type="text" id="cal" />  <div id="output"></div> 

function js

function show_calendar () {                 $("#output").html("<div id='box' style='border: 1px solid black; width: 350px; height:auto; border-radius: 3px; padding: 3px;margin: 0px;'><div id='head' style='margin: 0px;padding: 3px;border: 1px solid #c5c5c5;height: 40px;border-radius: 3px;font-family: arial, helvetica, sans-serif;font-weight: bold;font-size: 20px;text-align: center;line-height: 40px;background: #e9e9e9;'><div id='prec' style='margin: 0px;border: 1px solid black;height: inherit;width: 40px;float: left;'><div id='head-prec' style='cursor:pointer; position: relative;margin: 10px auto;width: 50%;height: 50%;border: 1px solid black;border-radius: 50%;background: #333333;'></div></div><span>" + title_month + " " +year+ "</span><div id='succ' style='margin: 0px;border: 1px solid black;height: inherit;width: 40px;float: right;'><div id='head-succ' style='cursor:pointer; position: relative;margin: 10px auto;width: 50%;height: 50%;border: 1px solid black;border-radius: 50%;background: #333333;'></div></div></div><div id='footer' style='margin: 0px;padding: 3px;height: auto;'><table style='margin: 0px auto;padding: 4px;'>");                  var thead = $('<thead><tr></tr></thead>')                 (var i=0; i<=6; i++) {                 thead.append("<th style='padding: 2px;'>"+week_days[i]+"</th>");                 }                 $("#output table").append(thead);                 //other code here ...                 tr.append("<td id="+days_count+" style='text-align: right;border: 1px solid #c5c5c5;background: #f6f6f6;font-weight: normal;color: #454545;height: 22px; cursor:pointer'>"+days_count+"</td>");                 //other code here ... 

jquery code

$(document).ready(function() {             $("#cal").click(function() {                 $("#output").toggle("slow", function () {                     show_calendar();                  });             });              $("td").click(function() {   //it doesn't work                 alert("clicked");             });         }); 

when click on td element in table doesn't work. why? how can fix?

try this

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