javascript - 刷新jquery点击事件

Question

我正在使用带有 jquery 的 html、css 和 js 创建一个日历。

HTML：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300&display=swap" rel="stylesheet">

<div class="calendar-container">
    <div class="calendar">
        <div class="month">
            <i class="fas fa-angle-left prev"></i>
            <div class="date">
                <h1>May</h1>
                <p>Fri May 29, 2020</p>
            </div>
            <i class="fas fa-angle-right next"></i>
        </div>
        <div class="weekdays">
            <div>Sun</div>
            <div>Mon</div>
            <div>Tue</div>
            <div>Wen</div>
            <div>Thu</div>
            <div>Fri</div>
            <div>Sat</div>
        </div>
        <div class="days">

        </div>
    </div>
</div>

CSS：

    .calendar-container {
        color: #eee;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .calendar {
        width: 45rem;
        height: 52rem;
        background-color: #222227;
        box-shadow: 0.5rem 3rem rgba(0, 0, 0, 0.4);
    }

    .month {
        width: 100%;
        height: 12rem;
        background-color: #167e56;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 2rem;
        text-align: center;
        text-shadow: 0 .3rem .5rem rgba(0, 0, 0, 0.5);
    }

        .month i {
            font-size: 2.5rem;
            cursor: pointer;
        }

        .month h1 {
            font-size: 3rem;
            font-weight: 400;
            text-transform: uppercase;
            letter-spacing: 0.2rem;
            margin-bottom: 1rem;
        }

        .month p {
            font-size: 1.6rem;
        }

    .weekdays {
        width: 100%;
        height: 5rem;
        padding: 0 0.4rem;
        display: flex;
        align-items: center;
    }

        .weekdays div {
            font-size: 1.5rem;
            font-weight: 400;
            letter-spacing: 0.1rem;
            width: calc(44.2rem / 7);
            display: flex;
            justify-content: center;
            align-items: center;
            text-shadow: 0 0.3rem 0.5rem rgba(0, 0, 0, 0.5);
        }

    .days {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        padding: 0.2rem;
    }

        .days div {
            font-size: 1.4rem;
            margin: 0.3rem;
            width: calc(40.2rem / 7);
            height: 5rem;
            display: flex;
            justify-content: center;
            align-items: center;
            text-shadow: 0 0.3rem 0.5rem rgba(0, 0, 0, 0.5);
            transition: background-color 0.2s;
        }

            .days div:hover:not(.today) {
                background-color: #262626;
                border: 0.2rem solid #777;
                cursor: pointer;
            }

    .prev-date,
    .next-date {
        opacity: 0.5;
    }

    .today {
        background-color: #167e56;
    }

    .marked {
        color: rgb(0, 150, 255);
    }

    .selected {
        border: 0.2rem solid #555;
    }

JavaScript：

    const date = new Date();
    var selectedDate;

    const renderCalendar = () => {
        date.setDate(1);

        const firstDayIndex = date.getDay();
        const firstDate = new Date(date.getFullYear(), date.getMonth(), 1 - firstDayIndex);

        const months = [
            "Janeiro",
            "Fevereiro",
            "Março",
            "Abril",
            "Maio",
            "Junho",
            "Julho",
            "Agosto",
            "Setembro",
            "Outubro",
            "Novembro",
            "Dezembro"
        ];

        document.querySelector(".date h1").innerHTML = months[date.getMonth()];
        document.querySelector(".date p").innerHTML = new Date().toDateString();

        $('.days').empty();

        while (firstDate.getMonth() <= date.getMonth() || firstDate.getDay() != 0) {
            var day = jQuery('<div>');
            day.html(firstDate.getDate());
            if (mark(firstDate)) day.addClass('marked');
            if (firstDate.getDate() == new Date().getDate()
                && firstDate.getMonth() == new Date().getMonth()
                && firstDate.getFullYear() == new Date().getFullYear())
                day.addClass('today');
            else if (firstDate.getMonth() < date.getMonth())
                day.addClass('prev-date');
            else if (firstDate.getMonth() > date.getMonth())
                day.addClass('next-date');
            if (selectedDate)
                if (firstDate.getFullYear() == selectedDate.getFullYear()
                    && firstDate.getMonth() == selectedDate.getMonth()
                    && firstDate.getDate() == selectedDate.getDate())
                    day.addClass('selected');

            firstDate.setDate(firstDate.getDate() + 1);
            day.appendTo('.days');
        }
    }

    $('.prev').click(() => {
            date.setMonth(date.getMonth() - 1)
            renderCalendar();
        });

    $('.next').click(() => {
            date.setMonth(date.getMonth() + 1)
            renderCalendar();
        });

    renderCalendar();

    $('.days div').click(element => {
        if (element.target.classList.contains('prev-date'))
            selectedDate = new Date(
                date.getFullYear(),
                date.getMonth() - 1,
                element.target.innerText
            );
        else if (element.target.classList.contains('next-date'))
            selectedDate = new Date(
                date.getFullYear(),
                date.getMonth() + 1,
                element.target.innerText
            );
        else
            selectedDate = new Date(
                date.getFullYear(),
                date.getMonth(),
                element.target.innerText
            );
        console.log(selectedDate);
        renderCalendar();
    });

描述代码，我有一个函数可以根据年份和月份renderCalendar()清理并添加日期。div.days然后我为每个“div.days div”创建一个事件侦听器，单击它会选择日期。

问题是当我重新渲染日历时，不再设置事件侦听器......有没有办法设置一次事件并且不需要每次都重置事件renderCalendar？

标签： javascripthtmljquerycss