jquery - Infinite scroll always pull nextSelector url

Question

I'm looking for a way to have infinite-scroll always use the url retrieved from the "nextSelector" no matter what the url is. The default is that it tries to guess what the url will be, after the first iteration.

I've tried:

  path: function(currentPageNumber) {
    return $(".previous-issue").attr("herf");
  },
  parsePath: function(path, currentPage) {
    return $(".previous-issue").attr("herf");
  },
  pathParse: function(path, currentPage) {
    var month_string = path.replace("/blogs/mindful-matter-2014-", "");
    var month = parseInt(month_string, 10);
    var leading = (month.toString().length == 1) ? "0" + month : month;
    return ["mindful-matter-2014-" + leading];
  },

But they don't have access to the fresh ajax content.

Answer 1

  var data_next = $(".previous-issue").attr("href");

  var fetchDataNext = function() {
    console.log(data_next);
    return data_next;
  }

  mindful_matter.infinitescroll = function() {
    if ($('.issue-container').length == 0) return false;
    $('.issue-container').infinitescroll({
      navSelector: ".navigation",
      nextSelector: ".previous-issue",
      itemSelector: ".issue",
      extraScrollPx: 250,
      path: function() {
        return fetchDataNext();
      },
      loading: {
        finished: undefined,
        finishedMsg: "",
        img: "data:image/gif;base64,R0lGODlhAQABAHAAACH5BAUAAAAALAAAAAABAAEAAAICRAEAOw==",
        msg: null,
        msgText: "",
        selector: null,
        speed: 'fast',
        start: undefined
      }
    }, function(newElements, data, url) {

      data_next = $(newElements).attr("data-next");

      console.log(data_next);

      if ($("[data-bg-image]") == 0) return false;
      $("[data-bg-image]").each(function() {
        var $this = $(this);
        var img = $this.attr("data-bg-image");
        $this.backstretch(img);
      });
      mindful_matter.masonry();
    });
  }