'Load More' event does not trigger after ajax call on main page

The CMS Questions
1

I followed the ‘Load More’ tutorial for a website blog I am working on. Everything is working; however, I am also using an AJAX call for my parent pages. (I’m using swup library).

Normally, I would bind an event after an AJAX request to the document using .on() in jQuery; however, I can’t seem to figure out how to do the same within the template/new.js file in pure Javascript.

Here’s my code as per the tutorial:

const element = document.querySelector('.articles');
const button = document.querySelector('.load-more');
let page = parseInt(element.getAttribute('data-page'));

console.log(element.getAttribute('data-page'))

const fetchArticles = async () => {
    let url = 'news.json/page:2';

    try {
        const response = await fetch(url);
        const {
            html,
            more
        } = await response.json();
        button.hidden = !more;
        element.innerHTML += html;
        page++;
    } catch (error) {
        console.log('Fetch error: ', error);
    }
}

button.addEventListener('click', fetchArticles);

Any help is greatly appreciated.

2

This might help: Plain JavaScript event delegation

Or search for event delegation.

3

Exactly what I needed.

my limited JS vocabulary thanks you :slight_smile: