JQuery click function not working after removing and adding back elements

Question

this is my click function

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

the problem i am having is that after i have switched to the next or previous month, my clicking function on the calendar does not work.

For example in my JSFIDDLE, if u move to the previous month and then move back to the current month and do the click function, it wouldn't work anymore.

EDIT: I'm using an external library called date.js, check out my jsfiddle for a clearer idea of what is going on.

EDIT 2: updated jsfiddle link

jsfiddle

Answer 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

Answer 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:

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

instead of:

<tr id=rowx></tr>