jQuery cssカレンダーの選択した月の変更後に「クリック」が機能しない

Question

私は、利用可能であるか使用不可であるかを変更するために、個々の日をクリックできる動的カレンダーに取り組んでいます。それは、別の月または年を選択するまで、それが想定されるように機能します。それが起こると、個々のセル/日の「クリック」イベントは機能しません。ここで

// 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', ''); 
} 
}; 

それは

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

}); 

を使用しています赤や緑に全体のカレンダーを変更する2つのボタンが選択され、各月で正常に動作するようには思えましたさ。

// 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'); 
}); 

例： JS Fiddle

Answer 1

ここで問題はDOMをリロードすることです。そういうわけで、それに付随する出来事は失われます。あなたはそれにイベントを再接続する必要があります。ちょうどこのように...

私はdisplayCalGridの内部にあなたのクリックイベントを入れました。だから、いつでも細胞が作られました..それはそれにイベントを添付します。

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

は、私はまた、あなたの選択のドロップダウン

にイベントを変更することは残念ながら動作しません.change()

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

Answer 2

あなたはon()の代わりclick()使用することができます。

あなたの実装では、別の月/年が選択されると、ビューが変更されると仮定しました。問題は、click（）バインディングはハンドラを既存の要素にのみ追加するためです。そのため、ビューを動的に変更したときには機能しません。

使用この代わりに：

$(".calCell:not(.empty)").on("click", function(){ 
    changeColor($(this)); 
}); 

Answer 3

あなたのクリックハンドラが発射されます。そのクリックイベントにconsole.log()を入れて確認しました。問題は、changeColor関数にあります。

奇妙なことに、あなたのフィドルはChromeでうまくいきましたが、Firefoxではうまくいきませんでした。 changeColor関数では、CSSに決して設定されていなかったbackground-colorの値をチェックしています。まず、.calCellスタイルルールにbackground-color: white;を追加します。

第2に、changeColor関数を更新して、正しい色を確認する必要があります。現在、あなたの最初のチェックは次のとおりです。

if(temp.css('background-color') == "rgba(0, 0, 0, 0)")

なし不透明と白ではない、黒の色、チェックです。あなたは色の不透明度を活用していないので、私はちょうどにチェックを更新することにより、RGBAのではなく、RGBをチェックすることをお勧めしたい：あなたのための初期値を設定したら

if(temp.css('background-color') == "rgb(255, 255, 255)")

background-color、正しい色で一致するようにチェックを更新しました。これはブラウザ間で動作するはずです