javascript - ajaxがhtmlを変更した後にjqueryを維持する方法は?

Question

基本的に、次のようなjqueryを取得しました。

$(".dates").on("mouseover", function(){
        $(this).css("background-color","red");
    });
    $(".dates").on("mouseout", function(){
        $(this).css("background-color", "white");
    });

このコードの下に、親要素のコンテンツを変更する ajax リクエストがあります。

$.ajax({
        url : "includes/calendar.php",
        type : "POST",
        data : {
            "count" : count
        },
        success : function(data){
            $('#calendar').html(data);
    }

クラス .dates は id#calendarを持つスパン内の要素であり、ajax が受け取ったデータはクラスを持つ別の日付のセットです.dates

しかし、ajax リクエストが完了して の html を変更した後、#calendar日付の jquery は機能しなくなります。

.datesajax成功の内部でjqueryコードをコピーせずに、ajaxリクエスト後に要素のjqueryを維持する方法はありますか?