Fabio97 Fabio97 - 3 months ago 7
jQuery Question

How to click on a td created using jquery?

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>')
for (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 I click on a td element in my table it doesn't work. Why?
How can I fix?

Answer

try this

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