Ajax addEventListener stops working after first click

Question

I am trying to populate a calendar with Ajax with Django backend. The code works just fine when I load the page and click id="wp-calendar-nav-next" and it populates the calendar as per my requirement. However it doesn't work after the first click. How do I recode it to make sure id="wp-calendar-nav-next" works constantly. I am trying to fix this before coding id="wp-calendar-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>

Below is the script:

<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>

Solution # 1: Again works the first time and doesn't work again

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

Solution # 2: This solution works perfectly.

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

The event handler is bound to an element in the DOM. `content_container.innerHTML = ...` overwrites everything in `#django-calendar` including that element with the event handler. — Andreas, Oct 08 '22 at 10:53
I tried the solution you referred to but its giving me the same behavior. Works the first time and doesn't work after. I am new to ajax and jquery so pardon my basic questions. If the script is outside the the DOM and DOM is only updated with values (i.e id, class etc doesn't change just some values within the DOM. Shouldn't script still be able to listen to the click with specific ID and run the fuction. — Humair Noor, Oct 08 '22 at 11:05
_"Solution # 1"_ is almost correct. Re-read that linked question. — Andreas, Oct 08 '22 at 11:21
Thank you for you assistance. I got it working. Solution updated — Humair Noor, Oct 08 '22 at 11:38
_"Solution # 2"_ does the exact same thing as _"Solution # 1"_ o.O - If that linked question solved your problem then please accept the duplicate vote and therefor close this question (as "solved") — Andreas, Oct 08 '22 at 11:48
Sorry I pasted the same code accidently. I have updated the solution 2. Yes the linked question helped. How to I accept the duplicate vote? Sorry new to stackoverflow — Humair Noor, Oct 08 '22 at 11:52
Can you please send that again because I think I accidently clicked it doesn't solve my problem earlier? — Humair Noor, Oct 08 '22 at 12:08
No, that's not possible... You can either delete the question, accept your own answer, or just leave it. — Andreas, Oct 08 '22 at 12:38

score 0 · Accepted Answer · edited Oct 10 '22 at 07:38

0

Solution # 2 worked in my case:

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

edited Oct 10 '22 at 07:38

Andreas

21,535
7
47
56

answered Oct 08 '22 at 11:56

Humair Noor

21
3

1

Don't use `document`. Always use the closest parent element that isn't changing. In your case that would be `#django-calendar` – Andreas Oct 08 '22 at 12:37

Ajax addEventListener stops working after first click

1 Answers1