title: Infinite scroll 'couldn't parse your Next (Previous Posts) URL' despite correct path being parsed
body: <p>I've got a page which I setup infinite scroll on and it was, the last time I looked, working without issue.</p>
  
  <p>I've gone back to it today and it cannot parse my next selector. I'm getting the following from debug;</p>
  
  <blockquote>
    <p>Sorry, we couldn't parse your Next (Previous Posts) URL. Verify your the css selector points to the correct A tag. If you still get this error: yell, scream, and kindly ask for help at infinite-scroll.com.</p>
  </blockquote>
  
  <p>But it does also log a few extras so some things are working and 'determinePath' is the correct path from the next link;</p>
  
  <pre><code>["determinePath", "/en-gb/news-media/videos/videos/"]
  pixelsFromNavToBottom: 663
  ["Binding", "bind"]
  </code></pre>
  
  <p>My JS looks like this;</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  (function($) {
      $(document).ready(function() {
          var container = $('.masonry'), masonry;
  
          // Masonry stuff goes on here            
  
          container.infinitescroll({
              debug: true,
              navSelector  : '#panel-area ul.navigation',    
              nextSelector : '#panel-area ul.navigation li.child.descendant a:first',  
              itemSelector : '#panel-area div.item.video',     
              loading: {
                  finishedMsg: 'No more pages to load.',
                  img: 'http://i.imgur.com/6RMhx.gif'
              }
          },
          // trigger Masonry as a callback
          function( newElements ) {
              // hide new items while they are loading
              var $newElems = $( newElements ).css({ opacity: 0 });
              // ensure that videos load before adding to masonry layout
              $newElems.imagesLoaded(function(){
                  // show videos now they're ready
                  $newElems.animate({ opacity: 1 });
                  container.masonry( 'appended', $newElems, true );
              });
          }
          );
      });
  })(jQuery);
  &lt;/script&gt;
  </code></pre>
  
  <p>HTML;</p>
  
  <pre><code>&lt;div id="panel-area" class="gallery_grid"&gt;
      &lt;div class="masonry js-masonry"&gt;
          &lt;div class="item video 2280" data-video-id="2280"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;ul class="navigation"&gt;
          &lt;li class="child descendant"&gt;
              &lt;a href="/en-gb/news-media/videos/videos/"&gt;14/04/2014&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="child descendant"&gt;
              &lt;a href="/en-gb/news-media/videos/1342014/"&gt;13/4/2014&lt;/a&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>As you can see, the <code>href</code> of that first link is correctly parsed and assigned to "determinePath". Furthermore, when I apply jQuery to those selectors in the console each returns exactly what I expect.</p>
  
  <p>I've tried to include pathParse, but that then loads from a none existent URL ;</p>
  
  <pre><code>pathParse: function () {
      var path = $('#panel-area ul.navigation li a:first').attr('href');
      return [path, '']
  }
  </code></pre>
  
  <p>That then performs a get request on <code>/en-gb/news-media/videos/videos/2/</code> which doesn't exist :(</p>
  
  <p>Where am I going wrong?</p>