Load Content in a div with already loaded content and so on

Question

I have like 14 pages eg page1, page2, page3, page4, page 5, page 6. Now the page 1 is loaded by default through load. And page1 has link to load next page. On page2 it has link to go back to page 1 and move to next page page 4 without refreshing just loading and so on.

So now i need a code for next and previous links for each load also i have a 10th page which have links for all pages that loads and it should be also loaded. The code i am using for loads. But its only working upto 2 loads. I need to make load through all pages with next and previous links and one loaded page for all links. I have html and css ready need help in js. Thanks

 $(function(){
      $('.modal-body').load('pages/page1.html', function(){
        //load your second set of html here with another load.
        $('.changed').click(function(){
             var page = $(".changed").attr('href');
            console.log(page);
            var loaded = $('.modal-body').load('pages/' + page + '.html');
            return false;
          });
    });

    });

Every Loaded page have link like

<a href="changed">Next</a>

Any help would be appreciated. I have already one navigation working outside the loaded content. But i need navigation within every new loaded page as well.

Answer 1

you can put a page counter in the Javascript. And you can use event delegation so you don't need to bind new handlers every time you reload the body.

$(function(){
  $('.modal-body').load('pages/page1.html'); // Load page 1 at start
  var curPage = 1;
  $(document).on("click", ".nextpage", function() {
    curPage++;
    $('.modal-body').load('pages/page' + curPage + '.html');
    return false;
  });
  $(document).on("click", ".prevpage", function() {
    curPage--;
    $('.modal-body').load('pages/page' + curPage + '.html');
    return false;
  });
});

The HTML should then have:

<a class="prevpage" href="#">Previous</a> <a class="nextpage" href="#">Next</a>