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.