Question

html代码

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

功能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代码

$(document).ready(function() {
            $("#cal").click(function() {
                $("#output").toggle("slow", function () {
                    show_calendar(); 
                });
            });

            $("td").click(function() {   //it doesn't work
                alert("clicked");
            });
        });

当我点击表格中的td元素时，它不起作用。为什么？我该如何解决？

Answer 1

更改此行：

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

为：

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

Answer 2

试试这个

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

如何单击使用jquery创建的td？

2 个答案: