.each() in pure Javascript

Question

On a platform of forums there is a pagination system, and I would like to make this pagination via Ajax, for this, I built the following function:

//<![CDATA[
var Pagination = (function(w, d) {
    var pagination = {

        init: function() {
            this.run();
        },

        run: function() {

            w.addEventListener('DOMContentLoaded', function() {
                var links = d.querySelectorAll('p.paging a[href^="/t"]');

                for (var i = 0; i < links.length; i++) {
                    links[i].addEventListener('click', function(event) {

                        event.preventDefault();

                        var link = this.getAttribute('href'),
                            xhr = new XMLHttpRequest();
                        xhr.onload = function() {
                            d.querySelector('.main').innerHTML = this.responseXML.querySelector('.main').innerHTML;
                        };
                        xhr.open('GET', link);
                        xhr.responseType = 'document';
                        xhr.send();
                    });
                }
            });

        }
    };

    pagination.init();

}(window, document));
//]]>

It works perfect until the first click. But if I click on more than one link the function does not work at all and the page is loaded normally.

I’m pretty sure the mistake is in my loop for(), i haven’t found a better way to make the Ajax function for each time I click on a link from that pagination.

If there’s any better way, I’m glad to know.

@Edit:

The structure of my HTML is like this:

<div class="main">
    <p class="paging">
        <a href="/topic/1">1</a>
        <a href="/topic/2">2</a>
        <a href="/topic/3">3</a>
    </p>
    <div class="topic">
        <div class="content">Conteúdo aqui.</div>
    </div>
</div>

Answer 1

In this your code is replacing the menu each time you load the div .main. This causes Vent handlers to get lost.

I see two options:

change selector in ajax callback to change the right content. Replacing to:

d.querySelector('.topic').innerHTML = this.responseXML.querySelector('.topic').innerHTML;

and thus change only the relevant content and not break the event headphones placed by your pagination.run();

putting back the Vent hadlers each time they load new content, once rewriting elements of the DOM causes them to lose the Vent handlers they had grabbed. So in ajax callback you can use:

xhr.onload = function() {
    d.querySelector('.main').innerHTML = this.responseXML.querySelector('.main').innerHTML;
    pagination.init();  // ou pagination.run();
};