Jquery Click Function Not Working After Removing And Adding Back Elements

this is my click function $('.cal table tbody td').on('click', function () { if($(this).hasClass('available')) { alert('asd'); } }); the problem i am having is

Solution 1:

Use this

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

instead of this

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

Former is the correct replacement for delegate

Solution 2:

one thing I notice immediately is that when you do things like:

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

you need to remember that when you want to give an ID to an element the 'value' portion of the ID should be enclosed in quotations.

So you need to escape the string to include them so your browser can interpret the html properly.

ie

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

that way your output looks like:

<trid="rowx"></tr>

instead of:

<trid=rowx></tr>

Solution 3:

Your previous and next event handlers are recreating the DOM elements used for rendering the calendar. However, your click handler is only only attached to the elements that exist in the DOM at the time that handler is registered. The documentation of on() states:

Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call to .on()

You'll probably need to re-register that click handler as part of your calendarInit() function after the new rows in the calendar - the new elements - have been rendered.

Solution 4:

You may view a working version here. Or take a look at the updated jQuery below.

var firstday = newDate();
var lastday = newDate();
var calendarmonth = newDate();
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 rowsfor (i = 1; i < 7; i++) {
                $('#row' + i).remove();
            }
        } else {
            //render 5 rowsfor (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 rowsfor (i = 1; i < 7; i++) {
                $('#row' + i).remove();
            }
        } else {
            //render 5 rowsfor (i = 1; i < 6; i++) {
                $('#row' + i).remove();
            }
        }
        $("#month").empty();
        calendarmonth.addMonths(1);
        firstday.addMonths(1);
        lastday.setMonth(firstday.getMonth() + 1, 0);
        calendarInit();
    });
    addRemoveClickTrigger();

});

functioncalendarInit() {
    CCheck = lastday.getDate() + firstday.getDay();
    var i;
    var colNo;
    var a = 1;
    var days = newArray();
    $("#month").append("Month: " + calendarmonth.toString("MMMM, yyyy"));
    if (CCheck > 35) {
        //render 6 rowsfor (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>');
                } elseif (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] = newDate();
                    days[datenum].set({
                        month: calendarmonth.getMonth(),
                        day: datenum,
                        year: calendarmonth.getFullYear()
                    });
                }
            }
        }
    } else {
        //render 5 rowsfor (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>');
                } elseif (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] = newDate();
                    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");
            } elseif (Date.today().getDate() > i) //highlight unavailable dates
            {
                $('#Y' + calendarmonth.getFullYear() + 'M' + calendarmonth.getMonth() + 'Day' + i).addClass("unavailable");
            } elseif (Date.today().getDate() < i) {
                $('#Y' + calendarmonth.getFullYear() + 'M' + calendarmonth.getMonth() + 'Day' + i).addClass("available");
            }
        }
    } elseif (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()functionaddRemoveClickTrigger()
{
    $('.cal table tbody td').off();
    $('.cal table tbody td').on({
        'click':
        function () 
        {
            alert(jQuery(this).prop('class'));
            if ($(this).hasClass('available')) 
            {
                alert('asd');
            }
        }
    });        
} //addRemoveClickTrigger()

I hope this helps.