How to click on a td created using jquery?

Question

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?

score 1 · Answer 1 · answered Aug 08 '16 at 15:39

1

Change this line:

$("td").click(function() {

to:

$(document).on('click' , 'td', function() {

answered Aug 08 '16 at 15:39

gaetanoM

39,803
6
34
52

score 0 · Accepted Answer · answered Aug 08 '16 at 15:39

0

try this

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

answered Aug 08 '16 at 15:39

Ivan Karaman

1,189
1
6
11

@Fabio97 create jsfiddle – Ivan Karaman Aug 08 '16 at 15:47
https://jsfiddle.net/m996dLxc/1/ – Fabio97 Aug 08 '16 at 15:53
@Fabio97 where is you table ?? – Ivan Karaman Aug 08 '16 at 16:04
`");` before of `var thead` at the end of line 21
– Fabio97 Aug 08 '16 at 16:06
@Fabio97 https://jsfiddle.net/m996dLxc/2/ – Ivan Karaman Aug 08 '16 at 16:10
What did you change? – Fabio97 Aug 08 '16 at 16:11
put inside document ready, and included jquery... – Ivan Karaman Aug 08 '16 at 16:13
What line where have you written this? – Fabio97 Aug 08 '16 at 16:15
Because I copied all the code and I tried this in my page but it doesn't work – Fabio97 Aug 08 '16 at 16:17
jquery included to page ? – Ivan Karaman Aug 08 '16 at 16:19
Yes with `` – Fabio97 Aug 08 '16 at 16:23
heh, method on added in 1.7 version ) – Ivan Karaman Aug 08 '16 at 16:25
update jquery, or u want another solution ? – Ivan Karaman Aug 08 '16 at 16:27
updated. thanks very much – Fabio97 Aug 08 '16 at 16:29

How to click on a td created using jquery?

2 Answers2