Django后端Ajax日历：next切换按钮点击一次后失效的解决

基于Django后端，使用Ajax实现日历内容填充功能。页面加载后，点击id为wp-calendar-nav-next的按钮时，日历能按预期完成填充，但首次点击后该按钮就不再生效。需修改代码确保该按钮可持续触发功能，后续再开发wp-calendar-nav-prev按钮逻辑。

对应HTML代码 #

<div class="widget-calendar-container " id="django-calendar">

    <div class="calendar-header">
        <div class="wp-calendar-nav-prev" id="wp-calendar-nav-prev">
            <a>Jan</a>
        </div>
        <div class="calendar-title" id="cur_mon">{{ activity_month|title }}</div>
        <div class="wp-calendar-nav-next" id="wp-calendar-nav-next">
            <a>Mar</a>
        </div>
    </div>

    <table id="wp-calendar" class="wp-calendar-table">
        <thead>
            <tr>
                <th scope="col" title="Sunday">Sun</th>
                <th scope="col" title="Monday">Mon</th>
                <th scope="col" title="Tuesday">Tue</th>
                <th scope="col" title="Wednesday">Wed</th>
                <th scope="col" title="Thursday">Thu</th>
                <th scope="col" title="Friday">Fri</th>
                <th scope="col" title="Saturday">Sat</th>
            </tr>
        </thead>
        <tbody id="ajax-calendar">
            <tr>
                {% for day in c_monthdays %}
                <td {% if day == activity_day %} class="calendar-viewing" {% endif %}>
                    <div class="calendar-day-content">
                        {% if day == 0 %}
                        {% else %}
                        <a href="{% url 'calendermonthday' activity_month day %}" class="ga-calendar-day-link">
                        {{ day }}
                        {% endif %}
                        </a>
                    </div>
                </td>
                {% if forloop.last %} </tr> {% elif forloop.counter|divisibleby:"7" %} </tr> <tr> {% endif %}
                {% endfor %}
        </tbody>
    </table>

</div>

原脚本代码 #

<script>
    const loadBtnNext = document.getElementById('wp-calendar-nav-next');
    function load_next_month() {
        var current_month = document.getElementById('cur_mon').textContent;
        const content_container = document.getElementById("django-calendar");
        $.ajax({
            url: '{% url "load_next_month" %}',
            type: 'GET',
            data: {
                'current_month': current_month
            },
            beforeSend: function () {
            },
            success: function (response) {
                const content_container_new = response.content_container_new
                content_container.innerHTML = `${ content_container_new }`

            },
            error: function (err) {
                console.log(err);
            },
        });
    }
    loadBtnNext.addEventListener('click', () => {
        load_next_month()
    });
</script>

尝试的解决方案 #

方案1：仅首次点击有效，之后失效 #

$('#wp-calendar-nav-next').on('click', 'a', function(){
    load_next_month()
});

失效原因：Ajax请求成功后，django-calendar容器的innerHTML被完全替换，原有的wp-calendar-nav-next元素被新DOM元素覆盖。该方案直接将事件绑定在原元素上，新生成的元素未继承事件绑定，因此后续点击无响应。

方案2：完美解决问题 #

$(document).on('click', '.wp-calendar-nav-next', function(){
  load_next_month()
});

生效原因：采用事件委托机制，将点击事件绑定在静态的document元素上，通过类选择器.wp-calendar-nav-next匹配触发事件的目标元素。无论DOM如何更新，只要新生成的翻页按钮符合该类选择器，点击事件就能被捕获并执行load_next_month函数，实现持续触发效果。

内容的提问来源于stack exchange，提问作者Humair Noor