Question

这是我的点击功能

$('.cal table tbody td').on('click', function () {
    if($(this).hasClass('available'))
    {
        alert('asd');
    }
});

我遇到的问题是，在我切换到下个月或上个月后，我在日历上的点击功能无效。

例如在我的JSFIDDLE中，如果你移动到上个月然后回到当前月份并执行点击功能，它将不再起作用。

编辑：我正在使用一个名为date.js的外部库，请查看我的jsfiddle以更清楚地了解发生了什么。

编辑2：更新的jsfiddle链接

jsfiddle

Answer 1

使用此

$(document).on('click','.cal table tbody td', function () {
        if ($(this).hasClass('available')) {
            alert('asd');
        }
});

而不是

$('.cal table tbody td').on('click', function () {
        if ($(this).hasClass('available')) {
            alert('asd');
        }
    });

前者是delegate

的正确替代品

Answer 2

我立即注意到的一件事是，当你做以下事情时：

$('#calendar tbody').append('<tr id = row'+i+'></tr>');

你需要记住，当你想给一个元素一个ID时，ID的'value'部分应该用引号括起来。

因此，您需要转义字符串以包含它们，以便您的浏览器可以正确解释html。

即

$('#calendar tbody').append('<tr id = \"row'+i+'\"></tr>');

你的输出方式如下：

<tr id="rowx"></tr>

而不是：

<tr id=rowx></tr>

Answer 3

您的上一个和下一个事件处理程序正在重新创建用于呈现日历的DOM元素。但是，您的单击处理程序仅在处理程序注册时仅附加到DOM中存在的元素。 on()州的文件：

事件处理程序仅绑定到当前选定的元素;他们在您的代码调用.on（）
时，页面上必须存在

您可能需要重新注册该点击处理程序作为calendarInit()函数的一部分日历中的新行 - 新元素 - 已经呈现。

Answer 4

您可以查看工作版here。或者看看下面更新的jQuery。

var firstday = new Date();
var lastday = new Date();
var calendarmonth = new Date();
var CCheck;

$(document).ready(function () {
    Date.today();

    firstday.setMonth(Date.today().getMonth(), 1);
    lastday.setMonth(Date.today().getMonth() + 1, 0);
    calendarmonth.setMonth(Date.today().getMonth());

    calendarInit();

    $('#calendar-prev').on('click', function () {
        if (CCheck > 35) {
            //render 6 rows
            for (i = 1; i < 7; i++) {
                $('#row' + i).remove();
            }
        } else {
            //render 5 rows
            for (i = 1; i < 6; i++) {
                $('#row' + i).remove();
            }
        }
        $("#month").empty();
        calendarmonth.addMonths(-1);
        firstday.addMonths(-1);
        lastday.setMonth(firstday.getMonth() + 1, 0);
        calendarInit();
    });

    $('#calendar-next').on('click', function () {
        if (CCheck > 35) {
            //render 6 rows
            for (i = 1; i < 7; i++) {
                $('#row' + i).remove();
            }
        } else {
            //render 5 rows
            for (i = 1; i < 6; i++) {
                $('#row' + i).remove();
            }
        }
        $("#month").empty();
        calendarmonth.addMonths(1);
        firstday.addMonths(1);
        lastday.setMonth(firstday.getMonth() + 1, 0);
        calendarInit();
    });
    addRemoveClickTrigger();

});

function calendarInit() {
    CCheck = lastday.getDate() + firstday.getDay();
    var i;
    var colNo;
    var a = 1;
    var days = new Array();
    $("#month").append("Month: " + calendarmonth.toString("MMMM, yyyy"));
    if (CCheck > 35) {
        //render 6 rows
        for (i = 1; i < 7; i++) {
            $('#calendar tbody').append('<tr id = row' + i + '></tr>');
            colNo = a + 6;
            for (a; a <= colNo; a++) {
                var datenum = a - firstday.getDay();
                if (datenum < 1) {
                    $('#row' + i).append('<td></td>');
                } else if (datenum > lastday.getDate()) {
                    $('#row' + i).append('<td></td>');
                } else {
                    $('#row' + i).append('<td id = Y' + calendarmonth.getFullYear() + 'M' + calendarmonth.getMonth() + 'Day' + datenum + '>' + datenum + '</td>');
                    days[datenum] = new Date();
                    days[datenum].set({
                        month: calendarmonth.getMonth(),
                        day: datenum,
                        year: calendarmonth.getFullYear()
                    });
                }
            }
        }
    } else {
        //render 5 rows
        for (i = 1; i < 6; i++) {
            $('#calendar tbody').append('<tr id = row' + i + '></tr>');
            colNo = a + 6;
            for (a; a <= colNo; a++) {
                var datenum = a - firstday.getDay();
                if (datenum < 1) {
                    $('#row' + i).append('<td></td>');
                } else if (datenum > lastday.getDate()) {
                    $('#row' + i).append('<td></td>');
                } else {
                    $('#row' + i).append('<td id = Y' + calendarmonth.getFullYear() + 'M' + calendarmonth.getMonth() + 'Day' + datenum + '>' + datenum + '</td>');
                    days[datenum] = new Date();
                    days[datenum].set({
                        month: calendarmonth.getMonth(),
                        day: datenum,
                        year: calendarmonth.getFullYear()
                    });
                }
            }
        }
    }
    /*alert(Date.today().getMonth());
    alert(calendarmonth.getMonth());*/
    if (Date.today().getMonth() == calendarmonth.getMonth() && Date.today().getFullYear() == calendarmonth.getFullYear()) {
        for (i = 1; i <= lastday.getDate(); i++) //Date highlight
        {
            if (Date.today().getDate() == i) //highlight today's date
            {
                $('#Y' + calendarmonth.getFullYear() + 'M' + calendarmonth.getMonth() + 'Day' + i).addClass("today");
            } else if (Date.today().getDate() > i) //highlight unavailable dates
            {
                $('#Y' + calendarmonth.getFullYear() + 'M' + calendarmonth.getMonth() + 'Day' + i).addClass("unavailable");
            } else if (Date.today().getDate() < i) {
                $('#Y' + calendarmonth.getFullYear() + 'M' + calendarmonth.getMonth() + 'Day' + i).addClass("available");
            }
        }
    } else if (Date.today() > calendarmonth) {
        for (i = 1; i <= lastday.getDate(); i++) //Highlight dates before today to unavailable
        {
            $('#Y' + calendarmonth.getFullYear() + 'M' + calendarmonth.getMonth() + 'Day' + i).addClass("unavailable");
        }
    } else {
        for (i = 1; i <= lastday.getDate(); i++) //Condition highlighting
        {
            $('#Y' + calendarmonth.getFullYear() + 'M' + calendarmonth.getMonth() + 'Day' + i).addClass("available");
            if (days[i].getDay() == 0 || days[i].getDay() == 6) // set weekends to unavailable
            {
                $('#Y' + calendarmonth.getFullYear() + 'M' + calendarmonth.getMonth() + 'Day' + i).removeClass("available");
                $('#Y' + calendarmonth.getFullYear() + 'M' + calendarmonth.getMonth() + 'Day' + i).addClass("unavailable");
            }
        }
    }
    addRemoveClickTrigger();
} //calendarInit()

function addRemoveClickTrigger()
{
    $('.cal table tbody td').off();
    $('.cal table tbody td').on({
        'click':
        function () 
        {
            alert(jQuery(this).prop('class'));
            if ($(this).hasClass('available')) 
            {
                alert('asd');
            }
        }
    });        
} //addRemoveClickTrigger()

我希望这会有所帮助。

删除和添加后退元素后，JQuery单击功能无法正常工作

jsfiddle

4 个答案: