Gorgon_Union Gorgon_Union - 7 months ago 23
HTML Question

jQuery css "click" doesn't work after change in selected month in calendar

I'm working on a dynamic calendar that allows user to click on individual days to change whether they're available or unavailable. It works as it's supposed to up until I select another month or year. Once that happens the "click" event on individual cells/days doesn't work.

// Changes cell background of the calendar
var changeColor = function(temp) {
// if cell background is white -> change to green
if(temp.css('background-color') == "rgba(0, 0, 0, 0)") {
temp.css('background-color', 'green');
// if cell background is green -> change to red
} else if (temp.css('background-color') == "rgb(0, 128, 0)") {
temp.css('background-color', 'red');
} else {
// else change back to white
temp.css('background-color', '');
}
};


Here is were it's used

$(document).ready(function() {
// When a date-cell is clicked - changes color to green -> red -> white
$(".calCell:not(.empty)").click(function() {
changeColor($(this));
});

});


The two buttons that change the whole calendar to red or green seem to work fine with each month selected.

// When Available button is click -> changes whole calendar to available
$("#yes").on("click", function() {
$(".calCell:not(.empty)").css('background-color', 'green');
});

// When Unavailable button is clicked -> changes whole calendar to unavailable
$("#no").on("click", function() {
$(".calCell:not(.empty)").css('background-color', 'red');
});


Example:
JS Fiddle

Answer

The problem here is you are reloading the DOM. That is why the attached event to it loses. You have to reattach the event to it. Just like this ...

I put your click event inside displayCalGrid function.. So whenever the cells was created .. It will attach the event to it.

var displayCalGrid = function(mnth, yr) {

    var firstDayOfMonth = mnth + "/1/" + yr;
    var d = new Date(firstDayOfMonth);
    var numOfDaysInMonth = daysInMonth(d);
    var firstDayOfWeek = d.getDay();
    var calstr = "";

    $("#results").html("");

    for(var j = 0; j < firstDayOfWeek; j++){
        calstr += "<div class='calCell empty'></div>";
    }

    var maxCalDays = 35;
    for(var i =0; i<numOfDaysInMonth; i++) {
        // if there are 7 cells create string - row
        if((i+ firstDayOfWeek) %7 ==0 && i>0) {
            calstr += "<div class='row'>";
        }


        // increments through each cell - making up each row
        calstr += "<div class='calCell'>" + (i+1) + "</div>";
        if (i%7 ==0 && i>0) {
            calstr += "</div>";
        }
    }
    $("#results").append(calstr);
    // When a date-cell is clicked - changes color to green -> red -> white
    $(".calCell:not(.empty)").click(function() {
        changeColor($(this));
    });
};

JSFIDDLE

I also change the event to your Select Dropdown

It is more logical if it is .change() than .click()

$("#month, #year").change(function(e) {
   displayCalGrid($("#month").val(), $("#year").val());
});