Jquery 第一次单击后，Ajax addEventListener 停止工作

我正在try 填充一个带有Django后端的AJAX日历.当我加载页面并单击id="wp-日历-NAV-NEXT"时，代码工作得很好，它会根据我的要求填充日历.然而，在第一次点击之后它就不起作用了.我如何对其进行重新编码以确保id="wp-日历-NAV-NEXT"持续工作.我正在try 在编码id="wp-日历-NAV-prev"之前修复这个问题.

<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()
});

解决方案2:这个解决方案效果很好.

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