Skip to main content
tags editadas
Link
Maniero
  • 484,4mil
  • 94
  • 1,3mil
  • 2,2mil
Tweeted twitter.com/#!/StackOverflowPT/status/493467848996814848
adicionou 334 caracteres ao conteúdo
Fonte Link
waghcwb
  • 2mil
  • 1
  • 17
  • 29

@Edit:

A estrutura do meu HTML é mais ou menos da seguinte maneira:

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

@Edit:

A estrutura do meu HTML é mais ou menos da seguinte maneira:

<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>
Fonte Link
waghcwb
  • 2mil
  • 1
  • 17
  • 29

.each() em Javascript puro

Em uma plataforma de fóruns existe um sistema de paginação, e eu gostaria de fazer essa paginação via Ajax, para isso, construi a seguinte função:

//<![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));
//]]>

Ele funciona perfeito até o primeiro clique. Porém se eu clicar em mais de um link a função não funciona de forma alguma e a página é carregada normalmente.

Eu tenho quase certeza que o erro é no meu laço for(), eu não encontrei uma maneira melhor de fazer a função Ajax para cada vez que eu clicar em um link dessa paginação.

Se houver alguma maneira melhor, fico grato em saber.