Wrong selector possibly,

$(function() {
    if (document.querySelector('.pagination a')) {
        console.log("Well a single search came up fine");
    }
    [...document.querySelectorAll('.pagination a')].forEach(e => {
        console.log(e);

        alert(Object.prototype.toString.call(e)); // [object HTMLAnchorElement]
        e.addEventListener('click', function(ev) {
            alert('Click!');
            if (!this.classList.contains('collapsed')) {
                // Prevents last collapsable from being closed
                ev.stopPropagation();
            }
        });
    });
});

To maybe make sure; code runs fine on my end?

I tested this

    [...document.querySelectorAll('a')].forEach(e => {
        console.log(e);
        e.addEventListener('click', function(ev) {
            alert('Click!');
            if (!this.classList.contains('collapsed')) {
                // Prevents last collapsable from being closed
                ev.stopPropagation();
            }
        });
    });

in console and it turned every link to what you desired. So possibly a bad reference or something out of the blue! :X

I have the below code in my project. I’m getting all anchor elements under .pagination and iterating over them and adding an event to each of them.

I added the alert in to prove that the elements have in fact loaded into the page and they are of the correct type (HTMLAnchorElement), however when I click on them, nothing fires. I even changed the event to various other types such as mousedown, select, etc.

$(function() {
    [...document.querySelectorAll('.pagination a')].forEach(e => {
        alert(Object.prototype.toString.call(e)); // [object HTMLAnchorElement]
        e.addEventListener('click', function(ev) {
            alert('Click!');
            if (!this.classList.contains('collapsed')) {
                // Prevents last collapsable from being closed
                ev.stopPropagation();
            }
        });
    });
});

Is anyone able to tell me why my events aren’t firing?