page formatting messing up nextSelector href

[learmj]

Hi. I've migrated part of my Wordpress site from ajax to jscroll. jscroll is a great piece of work and it's working extremely well with my pagination and navigation design (infinite scrolling for a while, then load a new page and start more infinite scrolling, rinse/repeat). I'm well aware that jscroll is in use on countless sites covering a multitude of use cases, so my discovery is extremely unlikely to be caused by a bug in jscroll. However, It would be great if I could get some feedback on something I've observed which is truly puzzling.

The problem I've encountered appears to be related to the nextSelector and how this is used within jscroll. Unless I insert a certain string into my page prior to the a href used for the nextSelector, jscroll does not successfully load the new content from the href of the nextSelector. It locates the nextSelector no problem, and with debug on I can see it calculating it's at the bottom of the window, trying to load new content, and the callback firing, only this repeats constantly. No new content is added so jscroll keeps trying. I can stop it by scrolling up the page.

I've validated the HTML on the page with w3c prior to jscroll being triggered and there are no errors (eg unclosed tags etc). Everything matches. I've used a different selector name so that jscoll can't bind to the nextSelector then checked the HTML on the page. All good.

When jscroll works on my page (when I have the 'special syntax prior to the a href), web inspector or Chrome dev tools show that it has been wrapped in text matching the 'special' syntax. It's almost like jscroll has altered the page content. I will try to explain what I mean...

Initialise like this:

$('.post-listing').jscroll({
debug: true,
    autoTrigger: true,
    autoTriggerUntil: false,
    padding: 300,
    nextSelector: 'a.mnext:last',
    contentSelector: '.post-listing',
    callback: function () {
        console.log('callback was called');
    }
});

My WP category page (which runs in the main loop - not a custom query) looks something like this:

	<?php if ( have_posts() ) : ?>

                    <div class="post-listing">

                    <?php while ( have_posts() ) : the_post(); ?>
                    
                       <?php if (has_post_thumbnail()) { ?>
                           <figure class="entry-thumbnail">
                           <?php
                               $attachment_id = get_post_thumbnail_id(get_the_ID());
                               $img_src = wp_get_attachment_image_url( $attachment_id, 'medium-large' );
                               $img_srcset = wp_get_attachment_image_srcset( $attachment_id, 'medium-large' );
                           ?>
                           <a href="<?php echo get_permalink(get_the_ID()); ?>">
                            <img src="<?php echo esc_url( $img_src ); ?>" srcset="<?php echo esc_attr( $img_srcset ); ?>"sizes="(max-width: 50em) 87vw, 774px" alt="<?php echo the_title(); ?>" class="aligncenter"></a>
                           </figure>

                           <div style="text-align:left"><?php echo strtoupper(get_the_title());?></div>
                       <?php } ?>

                    <?php endwhile; ?>

                    <why  ?>

                    <?php next_posts_link( 'Next' ); ?>

		</div> <!-- post-listing -->

	<?php else : ?>

		<?php get_template_part( 'content', 'none' ); ?>

	<?php endif; ?>

The above works great for infinite scrolling. However, if I remove the line '<why ?>' no content is ever loaded and jscroll keeps trying. I cannot figure out why this is happening.

I've tried removing the call to next_posts_link() and instead using a hard coded url for the href with the mnext class, yet the behaviour persists.

If I move the 'why' line under the nav, no content gets loaded. I move it up above the loop, still no dice. The only place jscroll works is as shown above.

If I clear the cache and reload the page in the working scenario, after a successful jscroll load and new content appears on the page, the href used as the nextSelector appears to be 'wrapped' when I look at the rendered HTML in the web inspector. It looks like this:

<div class="post-listing">   
<div class="jscroll-inner">    
<figure class="entry-thumbnail">   

I see the image and the title etc, things repeat in each jscroll-added div, and in the last jscroll-added div we have:

<why ?="" class="jscroll-next-parent" style="display: none;">   
<a href="https://example.com/foo/page/2/" class="mnext">Next</a>                        </why></div></div></div>    

It seems the formatting is messed up but the href syntax is valid, and it works.

I think I'm correct in saying that jscroll removes the nextSelector href div from the DOM, and that this happens for each page once the next page is loading.

https://github.com/pklauzinski/jscroll/blob/master/jquery.jscroll.js#L163

I wondered if something was causing jscroll to misinterpret all/part of the div somehow...

If I remove the magic line, reload and scroll a few times, each new jscroll-added div is empty, and the last jscroll-added div has all the images and srcsets from all the previous entries, but there must be a tag mismatch because no images appear on the page.

I appreciate this is a long read, so if anyone makes it to the bottom, I applaud you :-)

I'm assuming that what I see must be caused by a formatting issue somewhere on the page, but I cannot find it nor can I trace or narrow down where to look.

Any debugging tips appreciated!
Cheers.

[learmj]

fwiw, I dropped in https://infinite-scroll.com to replace jscroll, and used the same selectors for next and which append to. It works out the box without the 'special' string.