[Resolved] jQuery for infinite scroll new content applies also previously loaded pages

[vodryy]

Hello,
I am trying to run jQuery script when new content is load by infinite scroll.
I use the advice mentioned here: https://generatepress.com/forums/topic/jquery-event-on-load-more-posts-in-infinite-scroll/#post-644588
It is working well. JQuery runs on the new loaded content.

But the problem is, that it applies also on all previously loaded content.

The jQuery changes href attribute of .post-image a,h2.entry-title a classes.
Please, is there any way how to apply the jQuery script only on infinite scroll newly loaded elements and the previously loaded content leave untouched?

Best Regards

[Tom]

Hi there,

Can you share your code so I can see what it’s doing?

Let me know 🙂

[vodryy]

Hello,
sure, no problem. Here it is:

<script type="text/javascript">
jQuery( document ).ready( function($) {
    var $container = $( '#main article' ).first().parent();

    $container.on( 'append.infiniteScroll', function( event, response, path, items ) {
                   
           $(".post-image a,h2.entry-title a").one('click',function(){
           url=$(this).attr('href');
           $(this).attr('href','/tracking/track.php?u=' + escape(url));
           });
    } );
} );
</script>

[Tom]

Hmm, just did some searching around and couldn’t figure out a way to target newly appended items only.

One idea is to add classes to the posts on the first page only, then target those classes:

add_filter( 'post_class', function( $classes ) {
    if ( ! is_paged() ) {
        $classes[] = 'first-page-post';
    }

    return $classes;
} );

Then you could do this: .first-page-post .post-image a, .first-page-post h2.entry-title a

[vodryy]

Your PHP snippet took me to an interesting coding “trip”. 🙂 I have already resolved the first page before I wrote here. But the snippet, after some changes, is also usable to add new CSS classes into paged parts of infinite scroll. After some hard investigation I get to this version of PHP and jQuery codes.

I changed the PHP snippet to use current page number to generate new classes for infinite scroll pages

add_filter( 'post_class', function( $classes ) {
    
	if ( is_paged() ) {
	    $pagenum = (get_query_var('paged')) ? get_query_var('paged') : 1;
		$classes[] = 'page-'.$pagenum.'-post';
	}
	
	return $classes;
	
});

jQuery script adding the tracking code I changed to use the new classes with current page number (and added also new functionality – add target _blank to the links)

<script type="text/javascript">
jQuery( document ).ready( function($) {
    var $container = $( '#main article' ).first().parent();

    $container.on( 'append.infiniteScroll', function( event, response, path, items ) {
        var $infScroll = $container.data('infiniteScroll');  //current page number
	var pagenum = $infScroll.pageIndex;
	var aclass1 = '.page-' + pagenum + '-post .post-image a'; //create css classes based on current page number
	var aclass2 = '.page-' + pagenum + '-post h2.entry-title a';
  
		//select all classes and set target _blank
        	document.querySelectorAll(aclass1 + "," + aclass2) 
        	.forEach(function(elem) {
        	elem.setAttribute('target', '_blank');
        	});
           
			//select all classes and add tracking code prefix to href 			
			$(aclass1 + "," + aclass2).one('click',function(){  
           		url=$(this).attr('href');
           		$(this).attr('href','/tracking/track.php?u=' + escape(url));
           		});
    } );
} );
</script>

Thank you very much for the PHP snippet. It helped me a lot.
Now it seems to be working fine. But I appreciate your possible suggestions to the new code.

Have a nice rest of the weekend

[Tom]

Awesome, glad I was able to point you in the right direction. Thanks for sharing your code! 🙂

[Author]

Posts