jQuery for infinite scroll new content applies also previously loaded pages

Hi there,

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

Let me know :)

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>

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

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

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