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

this question has answer here:

• event binding on dynamically created elements? 19 answers

i'm working on dynamic calendar allows user click on individual days change whether they're available or unavailable. works it's supposed until select month or year. once happens "click" event on individual cells/days doesn't work.

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

here it's used

$(document).ready(function() { // when date-cell clicked - changes color green -> red -> white $(".calcell:not(.empty)").click(function() {     changecolor($(this)); });  }); 

the 2 buttons change whole calendar red or green seem work fine each month selected.

// when available button click -> changes whole calendar available $("#yes").on("click", function() {     $(".calcell:not(.empty)").css('background-color', 'green'); });  // when unavailable button clicked -> changes whole calendar unavailable $("#no").on("click", function() {     $(".calcell:not(.empty)").css('background-color', 'red'); }); 

example: js fiddle

the problem here reloading dom. why attached event loses. have reattach event it. ...

i put click event inside displaycalgrid function.. whenever cells created .. attach event 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 =0; i<numofdaysinmonth; i++) {         // if there 7 cells create string - row         if((i+ firstdayofweek) %7 ==0 && i>0) {             calstr += "<div class='row'>";         }           // increments through each cell - making each row         calstr += "<div class='calcell'>" + (i+1) + "</div>";         if (i%7 ==0 && i>0) {             calstr += "</div>";         }     }     $("#results").append(calstr);     // when date-cell clicked - changes color green -> red -> white     $(".calcell:not(.empty)").click(function() {         changecolor($(this));     }); }; 

jsfiddle

i change event select dropdown

it more logical if .change() .click()

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